From 5574d956d635c45a9c6e1f48fd03c96b0a8c336c Mon Sep 17 00:00:00 2001
From: William Lee <43682783+wlee221@users.noreply.github.com>
Date: Mon, 1 Feb 2021 08:08:14 -0800
Subject: [PATCH] feat(@aws-amplify/ui-vue): Use `@aws-amplify/ui-components`
 for Vue 3 (#7634)

* Add Vue 3 Integration tests

* Add warning message for Vue 2

* Try adding peer dependency

* throw error instead

* Fix whitespace

Co-authored-by: Sam Martinez <samlmar@amazon.com>
---
 .circleci/config.yml                 | 21 +++++++++++++++++----
 packages/amplify-ui-vue/package.json |  3 +++
 packages/amplify-ui-vue/src/index.ts | 10 ++++++++--
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 4996372e97f..13f689a12f7 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -414,19 +414,26 @@ jobs:
     steps:
       - prepare_test_env
       - integ_test_js:
-          test_name: 'Vue Authenticator'
+          test_name: 'Legacy Vue Authenticator'
           framework: vue
           category: auth
           sample_name: amplify-authenticator-legacy
           spec: authenticator
           browser: << parameters.browser >>
       - integ_test_js:
-          test_name: 'Vue Authenticator'
+          test_name: 'Vue 2 Authenticator'
           framework: vue
           category: auth
           sample_name: amplify-authenticator
           spec: ui-amplify-authenticator
           browser: << parameters.browser >>
+      - integ_test_js:
+          test_name: 'Vue 3 Authenticator'
+          framework: vue
+          category: auth
+          sample_name: authenticator-vue3
+          spec: ui-amplify-authenticator
+          browser: << parameters.browser >>
       - integ_test_js:
           test_name: 'Vue Custom Authenticator'
           framework: vue
@@ -478,13 +485,19 @@ jobs:
     steps:
       - prepare_test_env
       - integ_test_js:
-          test_name: 'Vue Interactions'
+          test_name: 'Vue 2 Interactions'
           framework: vue
           category: interactions
           sample_name: chatbot-component
           spec: chatbot-component
           browser: << parameters.browser >>
-
+      - integ_test_js:
+          test_name: 'Vue 3 Interactions'
+          framework: vue
+          category: interactions
+          sample_name: chatbot-component-vue3
+          spec: chatbot-component
+          browser: << parameters.browser >>
   integ_angular_interactions:
     parameters:
       browser:
diff --git a/packages/amplify-ui-vue/package.json b/packages/amplify-ui-vue/package.json
index aa40d093195..8d75c8286fc 100644
--- a/packages/amplify-ui-vue/package.json
+++ b/packages/amplify-ui-vue/package.json
@@ -19,6 +19,9 @@
 	"dependencies": {
 		"@aws-amplify/ui-components": "0.10.1"
 	},
+	"peerDependencies": {
+		"vue": "2.x.x"
+	},
 	"scripts": {
 		"build": "npm run clean && npm run compile",
 		"clean": "rm -rf dist",
diff --git a/packages/amplify-ui-vue/src/index.ts b/packages/amplify-ui-vue/src/index.ts
index a10b4290bc7..d0d0265979b 100644
--- a/packages/amplify-ui-vue/src/index.ts
+++ b/packages/amplify-ui-vue/src/index.ts
@@ -7,8 +7,14 @@ import Vue from 'vue';
 // Tell Vue to ignore all components defined in the @aws-amplify/ui-components
 // package. The regex assumes all components names are prefixed
 // 'amplify-'
-Vue.config.ignoredElements = [/amplify-\w*/];
-
+if (Vue) {
+	Vue.config.ignoredElements = [/amplify-\w*/];
+} else {
+	throw new Error(
+		'No Vue 2 export was found. For later versions of Vue, please use `@aws-amplify/ui-components` ' +
+			'according to this guide: https://docs.amplify.aws/start/getting-started/setup/q/integration/vue.'
+	);
+}
 // Bind the custom elements to the window object
 applyPolyfills().then(() => {
 	defineCustomElements(window);