Build your first full-stack serverless app with Vue and AWS Amplify

Introduction to AWS Amplify

Amplify CLI

The Amplify CLI uses AWS CloudFormation to manage service configuration and resource provisioning via templates. This a declarative and atomic approach to configuration. Once a template is executed, it will either fail or succeed.

Setting up a new project with the Vue CLI

yarn global add @vue/cli
vue create amplify-app
cd amplify-app
yarn serve


Setting up your Amplify project

amplify init
|_ amplify
|_ .config
|_ #current-cloud-backend
|_ backend

Installing the AWS Amplify dependencies

yarn add aws-amplify @aws-amplify/ui-vue

Adding authentication

amplify add auth

Pushing changes to the cloud

amplify push
amplify status

To access the AWS Cognito Console at any time, go to the dashboard at Also be sure that your region is set correctly.

Configuring the Vue application

import Vue from 'vue'
import App from './App.vue'

import Amplify from 'aws-amplify';
import '@aws-amplify/ui-vue';
import aws_exports from './aws-exports';


Vue.config.productionTip = false

new Vue({
render: h => h(App),

Using the Authenticator Component

<div id="app">
<h1>Hey, {{user.username}}!</h1>

import { AuthState, onAuthUIStateChange } from '@aws-amplify/ui-components'

export default {
name: 'app',
data() {
return {
user: { },
created() {
// authentication state managament
onAuthUIStateChange((state, user) => {
// set current user and load data after login
if (state === AuthState.SignedIn) {
this.user = user;


To view any users that were created, go back to the Cognito Dashboard at Also be sure that your region is set correctly.

amplify console auth

Accessing User Data

import { Auth } from 'aws-amplify';Auth.currentAuthenticatedUser().then(console.log)

Publishing your app

amplify add hosting
amplify publish

Cleaning up Services

amplify delete


Thanks for reading!

My Name is Gerard Sans. I am a Developer Advocate at AWS Mobile working with AWS Amplify and AWS AppSync teams.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store