AWS Amplify Vue Starter

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

Getting Started

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/

AWS Amplify Integration Explained

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

Setup AWS Amplify

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))

Auth Routing

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

Auth UI routing

Just add AuthRouter to router.

import { AuthRouter } from '../amplify'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },

    ...

    AuthRouter
  ]
})

Access Control

Just add AuthFilter to router

import { AuthFilter } from '../amplify'

...

router.beforeEach(AuthFilter);

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
  • 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.

License

This library is licensed under the Apache 2.0 License.