A VueJs starter app integrated with aws-amplify. Please submit issues to the aws-amplify repository.

• Getting Started
• AWS Amplify Integration Explained
  • Setup AWS Amplify
  • Auth Routing
  • Storage Components
• License

1. Clone project and install dependencies

$ 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 Mobile project:

$ npm install -g awsmobile-cli $ awsmobile init $ awsmobile user-signin enable $ awsmobile user-files enable $ awsmobile push

3. Start the project

$ npm start

Check http://localhost:8080/

This sample demostrate some of the AWS Amplify integration with VueJs. Most of the Amplify logics are contained inside src/amplify folder.

It is recommended to configure Amplify library at the entry point of application. Here we choose main.js

import Amplify, { Auth, Logger } from 'aws-amplify' import aws_exports from './aws-exports' ... Amplify.configure(aws_exports)

To have a quick test of the library, we added this piece of code.

Amplify.Logger.LOG_LEVEL = 'DEBUG' // to show detailed logs from Amplify library const logger = new Logger('main') Auth.currentUserInfo() .then(user => logger.debug(user)) .catch(err => logger.debug(err))

There are two major auth routing concerns in an application, 1) Auth UI routing; 2) Access Control to application.

Just add AuthRouter to router.

import { AuthRouter } from '../amplify' Vue.use(Router) const router = new Router({ routes: [ { path: '/', name: 'Home', component: Home }, ... AuthRouter ] })

Just add AuthFilter to router

import { AuthFilter } from '../amplify' ... router.beforeEach(AuthFilter);

In this sample, src/amplify package register a group of Amplify related components. Other than Auth components, there are two storage related components:

• PhotoPicker
  • registered as a-photo-picker
  • showcase usage of Amplify Storage on binary data
• SimpleForm
  • registered as a-simple-form
  • showcase usage of Amplify Storage on text data

Profile.vue uses the two components to store user avatar and attributes.

This library is licensed under the Apache 2.0 License.