Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/amazon-archives/aws-amplify-vue
A Vue.js starter app integrated with AWS Amplify
https://github.com/amazon-archives/aws-amplify-vue
amazon-cognito aws aws-amplify aws-sdk awsmobile awsmobile-cli cognito cognito-user-pool javascript todomvc vue vuejs
Last synced: about 2 months ago
JSON representation
A Vue.js starter app integrated with AWS Amplify
- Host: GitHub
- URL: https://github.com/amazon-archives/aws-amplify-vue
- Owner: amazon-archives
- License: apache-2.0
- Archived: true
- Created: 2018-02-02T18:51:52.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-06-16T18:52:37.000Z (over 4 years ago)
- Last Synced: 2024-05-21T13:59:10.410Z (7 months ago)
- Topics: amazon-cognito, aws, aws-amplify, aws-sdk, awsmobile, awsmobile-cli, cognito, cognito-user-pool, javascript, todomvc, vue, vuejs
- Language: JavaScript
- Homepage: https://github.com/aws/aws-amplify
- Size: 473 KB
- Stars: 351
- Watchers: 41
- Forks: 98
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-aws-amplify - aws-amplify-vue
README
# AWS Amplify Vue Starter
A 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**.
* [Getting Started](#getting-started)
* [AWS Amplify Integration Explained](#aws-amplify-integration-explained)
- [Setup AWS Amplify](#setup-aws-amplify)
- [Auth Routing](#auth-routing)
- [Storage Components](#storage-components)
* [License](#license)
## Getting Started
1. Clone project and install dependencies
```bash
$ git clone https://github.com/aws-samples/aws-amplify-vue.git
$ cd aws-amplify-vue-sample
$ npm install
```
2. Copy your `aws-exports` file into the src directory, or intialize a new [AWS Amplify CLI](https://github.com/aws-amplify/amplify-cli) project:
```bash
$ npm install -g @aws-amplify/cli
$ amplify init
$ amplify add auth
$ > Yes, use the default configuration.
$ amplify add storage
$ > Content (Images, audio, video, etc.)
...
$ > Auth users only
$ > read/write
$ amplify add api
$ > GraphQL
...
$ > Amazon Cognito User Pool
$ Do you have an annotated GraphQL schema? N
$ Do you want a guided schema creation? Y
$ > Single object with fields (e.g. "Todo" with id, name description)
$ Do you want to edit the schema now? Y
type Todo @model {
id: ID!
note: String!
done: Boolean
}
$ amplify push
$ Do you want to generate code for your newly created GraphQL API N
```
3. Start the project
```bash
$ npm start
```
Check http://localhost:8080/
### Setup AWS Amplify
It is recommended to configure Amplify library at the entry point of application. Here we choose `main.js`
```js
import Amplify from 'aws-amplify';
import { components } from 'aws-amplify-vue';
import aws_exports from './aws-exports'
...
Amplify.configure(aws_exports)
...
new Vue({
el: '#app',
router: router,
template: '',
components: {
App,
...components
}
})
```
We then install the AmplifyPlugin in the application's ```router/index.js``` file:
```
import { AmplifyPlugin } from 'aws-amplify-vue';
...
Vue.use(AmplifyPlugin, AmplifyModules);
```
This makes the Amplify library available throughout the application as a Vue Plugin.
### Authentication Components
This sample uses three auth-related components from the `aws-amplify-vue` package:
* Authenticator
- allows new users to signup, signin, and complete verification/multifactor authentication steps.
- included in the router as the default route that is shown when the user is not logged in.
* SetMFA
- included in the profile page
- allows users to select their preferred MFA types
- you can configure the MFA options that are dispayed in the SetMFA component by binding a mfaConfig object to the component like so:
```
...
mfaConfig = {
mfaTypes: ['SMS', 'TOTP', 'None']
}
```
### Storage Components
In this sample, `src/amplify` package register a group of Amplify related components. Other than Auth components, there are two storage related components:
* PhotoPicker
- showcase usage of Amplify Storage on binary data uploads
* S3Image
- showcase usage of Amplify Storage on binary data display
### Logging
This 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```.
## License
This library is licensed under the Apache 2.0 License.