{"id":13533442,"url":"https://github.com/amazon-archives/aws-amplify-vue","last_synced_at":"2025-04-01T21:32:17.504Z","repository":{"id":141667454,"uuid":"120018641","full_name":"amazon-archives/aws-amplify-vue","owner":"amazon-archives","description":"A Vue.js starter app integrated with AWS Amplify","archived":true,"fork":false,"pushed_at":"2020-06-16T18:52:37.000Z","size":484,"stargazers_count":351,"open_issues_count":9,"forks_count":98,"subscribers_count":41,"default_branch":"master","last_synced_at":"2024-05-21T13:59:10.410Z","etag":null,"topics":["amazon-cognito","aws","aws-amplify","aws-sdk","awsmobile","awsmobile-cli","cognito","cognito-user-pool","javascript","todomvc","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://github.com/aws/aws-amplify","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/amazon-archives.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2018-02-02T18:51:52.000Z","updated_at":"2024-01-22T15:37:56.000Z","dependencies_parsed_at":"2023-10-20T16:45:12.050Z","dependency_job_id":null,"html_url":"https://github.com/amazon-archives/aws-amplify-vue","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amazon-archives%2Faws-amplify-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amazon-archives%2Faws-amplify-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amazon-archives%2Faws-amplify-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amazon-archives%2Faws-amplify-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amazon-archives","download_url":"https://codeload.github.com/amazon-archives/aws-amplify-vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246713371,"owners_count":20821877,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["amazon-cognito","aws","aws-amplify","aws-sdk","awsmobile","awsmobile-cli","cognito","cognito-user-pool","javascript","todomvc","vue","vuejs"],"created_at":"2024-08-01T07:01:19.855Z","updated_at":"2025-04-01T21:32:16.823Z","avatar_url":"https://github.com/amazon-archives.png","language":"JavaScript","funding_links":[],"categories":["Example Projects"],"sub_categories":["Other blogs \u0026 tutorials"],"readme":"# AWS Amplify Vue Starter\n\nA VueJs starter app integrated with [aws-amplify](https://github.com/aws/aws-amplify). **Please submit issues to the [aws-amplify](https://github.com/aws/aws-amplify/issues) repository**.\n\n\u003cimg src=\"docs/assets/img/aws-amplify-vue-sample.png\" width=\"480px\" /\u003e\n\n* [Getting Started](#getting-started)\n* [AWS Amplify Integration Explained](#aws-amplify-integration-explained)\n  - [Setup AWS Amplify](#setup-aws-amplify)\n  - [Auth Routing](#auth-routing)\n  - [Storage Components](#storage-components)\n* [License](#license)\n\n## Getting Started\n\n1. Clone project and install dependencies    \n\n```bash\n$ git clone https://github.com/aws-samples/aws-amplify-vue.git\n$ cd aws-amplify-vue-sample\n$ npm install\n```\n\n2. Copy your `aws-exports` file into the src directory, or intialize a new [AWS Amplify CLI](https://github.com/aws-amplify/amplify-cli) project:\n\n```bash\n$ npm install -g @aws-amplify/cli\n\n$ amplify init\n\n$ amplify add auth\n$ \u003e Yes, use the default configuration.\n\n$ amplify add storage\n$ \u003e Content (Images, audio, video, etc.)\n...\n$ \u003e Auth users only\n$ \u003e read/write\n\n$ amplify add api\n$ \u003e GraphQL\n...\n$ \u003e Amazon Cognito User Pool\n$ Do you have an annotated GraphQL schema? N\n$ Do you want a guided schema creation? Y\n$ \u003e Single object with fields (e.g. \"Todo\" with id, name description)\n$ Do you want to edit the schema now? Y\n\n  type Todo @model {\n  id: ID!\n  note: String!\n  done: Boolean\n}\n\n$ amplify push\n$ Do you want to generate code for your newly created GraphQL API N\n\n```\n\n3. Start the project    \n\n```bash\n$ npm start\n```\n\nCheck http://localhost:8080/\n\n\n### Setup AWS Amplify\n\nIt is recommended to configure Amplify library at the entry point of application. Here we choose `main.js`\n\n```js\nimport Amplify from 'aws-amplify';\nimport { components } from 'aws-amplify-vue'; \nimport aws_exports from './aws-exports'\n\n...\n\nAmplify.configure(aws_exports)\n\n...\n\nnew Vue({\n  el: '#app',\n  router: router,\n  template: '\u003cApp/\u003e',\n  components: { \n    App,\n    ...components\n  }\n})\n\n```\n\nWe then install the AmplifyPlugin in the application's ```router/index.js``` file:\n\n```\nimport { AmplifyPlugin } from 'aws-amplify-vue';\n\n...\n\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n```\n\nThis makes the Amplify library available throughout the application as a Vue Plugin.\n\n### Authentication Components\n\nThis sample uses three auth-related components from the `aws-amplify-vue` package:\n\n* Authenticator\n  - allows new users to signup, signin, and complete verification/multifactor authentication steps.\n  - included in the router as the default route that is shown when the user is not logged in.\n\n* SetMFA\n  - included in the profile page\n  - allows users to select their preferred MFA types\n  - you can configure the MFA options that are dispayed in the SetMFA component by binding a mfaConfig object to the component like so:\n  ```\n  \u003camplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"\u003e\u003c/amplify-set-mfa\u003e\n\n  ...\n\n  mfaConfig = {\n    mfaTypes: ['SMS', 'TOTP', 'None']\n  }\n  \n  ```\n\n### Storage Components\n\nIn this sample, `src/amplify` package register a group of Amplify related components. Other than Auth components, there are two storage related components:\n\n* PhotoPicker\n  - showcase usage of Amplify Storage on binary data uploads\n* S3Image\n  - showcase usage of Amplify Storage on binary data display\n\n### Logging\n\nThis application uses verbose [logging](https://aws-amplify.github.io/amplify-js/media/logger_guide#logger) by default.  You can change the log level by altering the line ```window.LOG_LEVEL = 'VERBOSE';``` in ```App.vue```.\n\n## License\n\nThis library is licensed under the Apache 2.0 License. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famazon-archives%2Faws-amplify-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famazon-archives%2Faws-amplify-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famazon-archives%2Faws-amplify-vue/lists"}