Added Storage sample with VueJS

samples/vue/storage/S3/.gitignore

@@ -0,0 +1,43 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+#amplify
+amplify/\#current-cloud-backend
+amplify/.config/local-*
+amplify/logs
+amplify/mock-data
+amplify/backend/amplify-meta.json
+amplify/backend/awscloudformation
+amplify/backend/.temp
+build/
+dist/
+node_modules/
+aws-exports.js
+awsconfiguration.json
+amplifyconfiguration.json
+amplifyconfiguration.dart
+amplify-build-config.json
+amplify-gradle-config.json
+amplifytools.xcconfig
+.secret-*

samples/vue/storage/S3/README.md

@@ -0,0 +1,51 @@
+# s3-album-vue
+
+The project demonstrate VueJS components provided by AWS Amplify for Authentication and Storage. The project promotes "LOW-CODE" and readily availalble VueJS components for seemless integration with AWS Serverless Backend and other AWS services.
+
+A detailed walkthrough of the project available on Dev.to
+
+Blog : https://dev.to/awscommunity-asean/aws-amplify-and-front-end-development-5geg
+
+Author : https://dev.to/zachjonesnoel
+
+## Project setup
+
+### Installing dependencies
+```
+npm install
+```
+
+### Setting up Amplify
+1. Login or [Create](https://portal.aws.amazon.com/billing/signup?type=enterprise#/start) an AWS Account.
+2. In a terminal, clone this repo.
+3. Install the [Amplify CLI](https://github.com/aws-amplify/amplify-cli) `npm install -g @aws-amplify/cli`. Ensure you are in the directory you just cloned.
+4. If it’s your first time using the CLI, you will need to configure it by running `amplify configure`. Follow the instructions to create an IAM profile locally.
+5. Now let’s initialize an Amplify project in this directory. `amplify init`
+
+```
+$ amplify init
+? Enter a name for the environment  dev
+? Choose your default editor: (pick an editor)
+? Do you want to use an AWS profile? Y (this should be the profile you created in step #4)
+```
+
+6. Lastly, the CLI will provision our backend resources using the config files in the `amplify` directory. To provision these resources in the cloud, run `amplify push`. Confirm you want to use the Auth category.
+
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

samples/vue/storage/S3/amplify/.config/project-config.json

@@ -0,0 +1,17 @@
+{
+  "projectName": "s3albumvue",
+  "version": "3.1",
+  "frontend": "javascript",
+  "javascript": {
+    "framework": "vue",
+    "config": {
+      "SourceDir": "src",
+      "DistributionDir": "dist",
+      "BuildCommand": "npm run-script build",
+      "StartCommand": "npm run-script serve"
+    }
+  },
+  "providers": [
+    "awscloudformation"
+  ]
+}

samples/vue/storage/S3/amplify/README.md

@@ -0,0 +1,8 @@
+# Getting Started with Amplify CLI
+This directory was generated by [Amplify CLI](https://docs.amplify.aws/cli).
+
+Helpful resources:
+- Amplify documentation: https://docs.amplify.aws
+- Amplify CLI documentation: https://docs.amplify.aws/cli
+- More details on this folder & generated files: https://docs.amplify.aws/cli/reference/files
+- Join Amplify's community: https://amplify.aws/community/

samples/vue/storage/S3/amplify/backend/auth/s3albumvue229f70f3/parameters.json

@@ -0,0 +1,56 @@
+{
+    "identityPoolName": "s3albumvue229f70f3_identitypool_229f70f3",
+    "allowUnauthenticatedIdentities": false,
+    "resourceNameTruncated": "s3albu229f70f3",
+    "userPoolName": "s3albumvue229f70f3_userpool_229f70f3",
+    "autoVerifiedAttributes": [
+        "email"
+    ],
+    "mfaConfiguration": "OFF",
+    "mfaTypes": [
+        "SMS Text Message"
+    ],
+    "smsAuthenticationMessage": "Your authentication code is {####}",
+    "smsVerificationMessage": "Your verification code is {####}",
+    "emailVerificationSubject": "Your verification code",
+    "emailVerificationMessage": "Your verification code is {####}",
+    "defaultPasswordPolicy": false,
+    "passwordPolicyMinLength": 8,
+    "passwordPolicyCharacters": [],
+    "requiredAttributes": [
+        "email"
+    ],
+    "userpoolClientGenerateSecret": false,
+    "userpoolClientRefreshTokenValidity": 30,
+    "userpoolClientWriteAttributes": [
+        "email"
+    ],
+    "userpoolClientReadAttributes": [
+        "email"
+    ],
+    "userpoolClientLambdaRole": "s3albu229f70f3_userpoolclient_lambda_role",
+    "userpoolClientSetAttributes": false,
+    "sharedId": "229f70f3",
+    "resourceName": "s3albumvue229f70f3",
+    "authSelections": "identityPoolAndUserPool",
+    "authRoleArn": {
+        "Fn::GetAtt": [
+            "AuthRole",
+            "Arn"
+        ]
+    },
+    "unauthRoleArn": {
+        "Fn::GetAtt": [
+            "UnauthRole",
+            "Arn"
+        ]
+    },
+    "useDefault": "default",
+    "usernameAttributes": [
+        "email"
+    ],
+    "userPoolGroupList": [],
+    "serviceName": "Cognito",
+    "usernameCaseSensitive": false,
+    "dependsOn": []
+}