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>
aws-amplify · Feb 1, 2021 · 5574d95 · 5574d95
1 parent 08277af
commit 5574d95
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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);