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

Prerequisites

Setting up your Amplify project

amplify init
<amplify-app>
|_ amplify
|_ .config
|_ #current-cloud-backend
|_ backend
team-provider-info.json

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 https://console.aws.amazon.com/cognito. 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';

Amplify.configure(aws_exports);


Vue.config.productionTip = false

new Vue({
render: h => h(App),
}).$mount('#app')

Using the Authenticator Component

<template>
<div id="app">
<amplify-authenticator>
<div>
<h1>Hey, {{user.username}}!</h1>
<amplify-sign-out></amplify-sign-out>
</div>
</amplify-authenticator>

</div>
</template>
<script>
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;
}
})

}
}
</script>

To view any users that were created, go back to the Cognito Dashboard at https://console.aws.amazon.com/cognito. 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

Conclusion

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