How to Build Serverless Vue Applications with AWS Amplify

AWS Amplify now has built-in components for the Vue library. This means that you can scaffold out pre-configured components for functionality like authentication flows, chatbots, & photo-pickers with just a few lines of code.

You can also implement serverless AWS AppSync GraphQL APIs, Lambda functions, analytics, hosting, VR / AR scenes & more using the Amplify CLI & library with Vue.

In this tutorial, we’ll walk through how to set up authentication, storage, and a GraphQL API using AWS Amplify & Vue.

Getting Started

Creating & configuring the Vue project

To get started, we’ll first install the Vue CLI & create a new project:

npm install -g @vue/cli

Next, we’ll create a new Vue project:

vue create vue-serverless-project

For the preset, choose babel.

Next, we’ll change into the new directory & install the AWS Amplify libraries:

cd vue-serverless-project

yarn add aws-amplify aws-amplify-vue

Installing & configuring the Amplify CLI

Now that the Vue project has been created, we can install the AWS Amplify CLI:

npm install -g @aws-amplify/cli

Next, we’ll need to configure the CLI with an AWS IAM user. To do so, we can run the configure command:

amplify configure

For a walkthrough of how to configure the CLI, check out this video.

Now that the CLI has been installed & configured, we can create a new Amplify project inside the root directory of the new Vue project we just created:

amplify init

☝️ Here you can choose the text editor you are using & then choose the default option for the rest of the choices.

Adding Authentication

Now that the Vue project is created & the Amplify project has been initialized, we can begin adding & using services.

The first service we’d like to add is authentication. To add a service we can run the amplify add command, so we’ll run the following command:

amplify add auth

• Do you want to use the default authentication and security configuration? Y

Next, we’ll run the push command to create & enable the resources in our account:

amplify push

Configuring the Vue Project

Now, the authentication service has been created in our account & we can begin using it.

You can now view the Cognito authentication service anytime in your account here.

The next thing we need to do is configure the actual Vue project to recognize & use the new Amplify project. To do this, we open main.js & add the following:

import Amplify, * as AmplifyModules from 'aws-amplify';import { AmplifyPlugin } from 'aws-amplify-vue';import aws_exports from './aws-exports';Amplify.configure(aws_exports);

Vue.use(AmplifyPlugin, AmplifyModules);

Now, let’s open App.vue and add the authentication flow. To get started, let’s update App.vue to have the following code:

Now, save the file & run the app:

vue serve

We now see both a sign in / sign up form as well as a sign out button. The <amplify-authenticator> component is what renders the sign in / sign up form, & the <amplify-sign-out> component is what renders the sign out button.

This is a good start, but really we only want to show the sign out button if the user is already signed in & the sign up /sign in form if the user is not already signed in. Let’s update our code to maintain some state that will control what is and isn’t shown.

In the above code, we’ve set some initial state to set the signedIn property to false. When the app loads, we check to see if the user has been signed in, if so we then update the signedIn value to be true in order to show our application as well as the sign out button.

If the user is not signed in, then we show the form. We also create an event listener that will update the signedIn value whenever the user signs in or out.

If you’re interested in learning how to create protected routes using Vue Router & AWS Amplify, this is pretty easy & I’ve created some sample code here for you to check out.

Amplify also has an Auth class if you’d like to build your own custom authentication flow. There are over 30 methods available on the Auth class including signUp(), confirmSignUp(), signIn(), confirmSignIn() & forgotPassword(). To view all of the available methods, check out the docs here & the API here.

Adding a Photo Picker with Amazon S3

The next thing we’ll do is add storage using Amazon S3. One very popular use case for S3 is storing media such as video & image files. Since that is the case, let’s look at how to implement a photo picker using the preconfigured Vue components.

To add storage with S3, we’ll again run the amplify add command:

amplify add storage

• Please select from one of the below mentioned services: Content (Images, audio, video, etc.)
• Please provide a friendly name for your resource: <SOMENAME>
• Please provide bucket name: <UNIQUEBUCKETNAME>
• Who should have access: Auth users only
• What kind of access do you want for Authenticated users: read/write

Now, we can run amplify push to create the resources in our account:

amplify push

You can view the S3 buckets in your account at any time by visiting the console here.

Now, the resource has been created & we can begin interacting with it! To do so, we’ll first create a photo picker & photo album! The components we will be using for this will be <amplify-photo-picker> & <amplify-s3-album>.

The main things to note here are that in our script, we create a configuration object called photoPickerConfig, setting the path for the images we are uploading. In this case, we choose to upload them to a folder called images.

In the S3 album component we also pass the same file path, images/, so that we will be looking in the correct location for the images we have already uploaded.

We should now still see our Sign Out button at the top along with a way to choose photos to upload. Below the upload form we should see any photos that we have added to the S3 bucket.

In addition to this preconfigured Vue component, we can use the Storage class directly to upload & download images:

import

Storage.list('images/')  .then(data => console.log('images from S3: ', data))  .catch(err => console.log('error'))

To learn more about the Storage class & to view all available methods, check out the docs here & the API here.

GraphQL with AWS AppSync

The first two example we looked at were using the preconfigured UI components for Vue, so let’s change things up a bit and use one of the core Amplify features, the API feature.

With the API feature we can create either REST or GraphQL APIs & also interact with them from any JavaScript or native app.

In this section, let’s create a coffee shop API that will keep up with our favorite coffee shops, their location & their rating.

Creating the API

To create the API, we’ll run the amplify add command, choosing GraphQL as the type:

amplify add api

• Please select from one of the below mentioned services: GraphQL
• Provide API name: walkthroughcoffeeshopapi
• Choose an authorization type for the API: API key
• Do you have an annotated GraphQL schema? No
• Do you want a guided schema creation? Y
• What best describes your project: Single object with fields (e.g., “Todo” with ID, name, description)
• Do you want to edit the schema now? (Y/n) Y

Here, edit the schema to be the following:

type CoffeeShop @model {id: ID!name: String!description: Stringlocation: Stringrating: Int}

Now, to create the resources in our account we’ll run amplify push:

amplify push

• Do you want to generate code for your newly created GraphQL API No

If you would like to have your queries, mutations & subscriptions automatically generated for you, you can choose yes in the above step. Because we are only using a couple, I decided we would write them from scratch.

Now, the AWS AppSync GraphQL API has been created & we can begin interacting with it!

You can view the AWS AppSync console at any time by visiting the console here.

The UI for the app will look like this:

We will still have the Sign Out button, but we will also have a form that will allow users to add new coffee shops to their list.

We will also render all of the items that have been saved in the API, rendering their name & location.

We will break this code into three parts: HTML, JavaScript, & CSS. Let’s first take a look at the HTML:

Here, we have two inputs & a button for a form. We’ve added a few classes for styling, we’ve bound a click handler (createCoffeeShop) to the button & also added models to the inputs to keep up with user input as the user types.

We’ve also included list using v-for to iterate over all of the coffee shops that we will be storing in our App.

Next, let’s take a look at the JavaScript:

There’s a lot going on here, so let’s walk through it:

• We import API & graphqlOperation from Amplify:

import { Auth, API, graphqlOperation } from 'aws-amplify'

• We define the query & the mutation we will be using
• For the initial data in our component, we define a name & description property set to empty strings as well as a coffeeShops property set to an empty array.
• In the beforeCreate method, we call the API to fetch the list of restaurants, & then update the local data with the data from the API (coffeeShops array).
• In the createCoffeeShop method, we first check to make sure that the name & description properties are not empty. We then create a new object (coffeeShop) with the info we will need for the mutation (name & description). We update the local coffeeShops array with the new coffeeShop data, & then make the API call to trigger the mutation & therefore creating a new item in our API.

In addition to doing mutations & queries, we can also set up subscriptions for real-time data. To view the full documentation for the GraphQL client, click here.

AWS AppSync has an additional GraphQL client that has a similar API to the Apollo client & offers first-class support for offline functionality out of the box! To check it out, go to the docs here.

Conclusion

In addition to working with GraphQL, storage, & authentication, AWS Amplify enables chat-bots, analytics, AR / VR, internationalization, serverless Lambda functions & more.

The library is under development so look out for additional features as well in the future! To learn more, check out the docs.