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.

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.

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:

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.

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.