Vue.js and AWS Amplify: Unleashing the Full Potential

Trishant Kumar

Published in

Simform Engineering

7 min readOct 2, 2023

Building dynamic web applications with AWS Amplify.

Vue.js is a progressive framework for creating single-page applications and dynamic user interfaces.

In this article, we’ll learn how AWS Amplify enables us to create full-stack server-less applications with Vue.js. Specifically, we will implement an authorization flow using the Amplify Authenticator component.

What is Amplify Vue?
Getting Started with Vue Application with Vite
Building a Full-Stack Vue App with Amplify
Setup Amplify environment
Authentication and Authorization
Deploying Your Vue App with Amplify

What is Amplify Vue?

Amplify Vue is a powerful tool that simplifies the integration of AWS Amplify into Vue.js applications. AWS Amplify is a set of tools and services that can be used to build scalable and secure cloud-powered web and mobile applications.

AWS offers tools that help front-end web and mobile developers easily build, connect, and host full-stack applications on AWS. Amplify provides a comprehensive set of features such as authentication, storage, APIs, and analytics, making it easier to build scalable and secure user interfaces.

Amplify pre-built UI components also make it easier to create responsive and visually appealing user interfaces. Additionally, the flexible architecture of Vue.js allows for easy integration with other third-party libraries and services.

Amplify CLI: It is a command line tool that provides services needed to configure and integrate Amplify services.
Amplify libraries: aws-amplify and aws-amplify/ui-vue
Amplify UI Components: Authenticator
Amplify Hosting: It provides git-based continuous deployment and manual deployment options.

Getting Started with Vue Application with Vite

To get started, we’ll create a new Vue project using Vite, incorporating the latest features and manually selecting the required dependencies.

To create a new project with Vite, use this command:

npm create vite@latest

Next, go to the project directory and run the following command to install all dependencies:

cd amplify-vue
npm install
npm run dev

Building a Full-Stack Vue App with Amplify

To get started with AWS Amplify, you’ll first need an AWS account. If you don’t have one, you can create an account here.

Step 1: Install Amplify Dependencies: Begin by installing the necessary AWS dependencies for your project:

npm install aws-amplify @aws-amplify/ui-vue

Step 2: Install Amplify CLI: If you haven’t already installed the Amplify CLI, you can do so with the following command:

npm install -g @aws-amplify/cli

Step 3: Now, configure Amplify by running the following command:

amplify configure

This command will prompt you to sign in to your AWS console. You can sign in from here.

Step 4: After signing in to your AWS console, follow these steps in your terminal:

Specify your region — pick any region that suits your needs.

2. Next, you’ll be prompted to specify user details, where you’ll need to enter the IAM user.

3. Click the “Next” button to set permissions, then click “Create User” to register the user.

4. You’ll see the newly created user (e.g., amplify-user). Click on it to proceed.

5. Inside the user, click “Create Access Key.”

6. Choose “Command Line Interface,” confirm the selection, and click “Next.”

7. Enter a description (e.g., “Personal Use”) and click “Create Access Key.”

8. Save these access and secret keys or download them as a .csv file.

9. Return to your terminal, where you’ll be asked to enter the access key ID and secret access key from the file you saved earlier.

Lastly, select the profile name as “default.”

That’s it! You’ve now configured Amplify to work with your AWS account. If you ever need to check your IAM user, you can do so here: https://console.aws.amazon.com/iam/

Setting Up the Amplify Environment

To utilize the essential backend services provided by Amplify, you must initialize Amplify in your Vue project using the following command:

amplify init

When you execute the above command, it will prompt you to provide some information about your application.

Next, you’ll need to choose an authentication method. In this case, we’ll opt for the AWS profile and select the default one.

Now, if you check your project directory, you’ll notice that Amplify has generated a built-in folder containing the necessary dependencies. Your Project Directory should now include Amplify’s required files and folders.

With the backend setup complete, let’s move on to configuring the frontend.

Authentication and Authorization

To add an authentication component to your project, add the following code in your following files:

App.vue

<script setup lang="ts">
  import { Authenticator } from "@aws-amplify/ui-vue";

  import { Amplify } from 'aws-amplify';
  import awsconfig from './aws-exports';

  Amplify.configure(awsconfig);
</script>

<template>
  <authenticator>
    <template v-slot:sign-up-header>
      <h3
        class="amplify-heading"
        style="padding: var(--amplify-space-xl) 0 0 var(--amplify-space-xl)"
      >
        Create a new account
      </h3>
    </template>
    <template v-slot:header>
      <div style="padding: var(--amplify-space-large); text-align: center">
        <img
          class="amplify-image"
          alt="Amplify logo"
          src="https://docs.amplify.aws/assets/logo-dark.svg"
        />
      </div>
    </template>
    <template v-slot:sign-in-header>
      <h3
        class="amplify-heading"
        style="padding: var(--amplify-space-xl) 0 0 var(--amplify-space-xl)"
      >
        Sign in to your account
      </h3>
    </template>
    <template v-slot="{ user, signOut }">
      {{ user }}
      <h1>Hello {{ user.username }}!</h1>
      <button @click="signOut" variation="primary">Sign Out</button>
    </template>
    <template v-slot:footer>
      <div style="padding: var(--amplify-space-large); text-align: center">
        <p class="amplify-text" style="color: var(--amplify-colors-neutral-80)">
          © All Rights Reserved
        </p>
      </div>
    </template>
  </authenticator>
</template>


<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
[data-amplify-authenticator] {
  --amplify-components-button-primary-background-color: var(
    --amplify-colors-brand-secondary-80
  );
  --amplify-components-button-primary-hover-background-color: var(
    --amplify-colors-brand-secondary-90
  );
  --amplify-components-button-primary-focus-background-color: var(
    --amplify-colors-brand-secondary-90
  );
  --amplify-components-button-primary-active-background-color: var(
    --amplify-colors-brand-secondary-100
  );
  --amplify-components-button-link-color: var(
    --amplify-colors-brand-secondary-80
  );
  --amplify-components-button-link-hover-color: var(
    --amplify-colors-brand-secondary-90
  );
  --amplify-components-button-link-focus-color: var(
    --amplify-colors-brand-secondary-90
  );
  --amplify-components-button-link-active-color: var(
    --amplify-colors-brand-secondary-100
  );
  --amplify-components-button-link-active-background-color: transparent;
  --amplify-components-button-link-focus-background-color: transparent;
  --amplify-components-button-link-hover-background-color: transparent;
}
</style>

main.ts

import { createApp } from 'vue';
import './style.css'
import App from './App.vue';
import '@aws-amplify/ui-vue/styles.css';

const app = createApp(App);
app.mount('#app');

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  define: {
    global: {},
  },
  plugins: [vue()],
  resolve: {
      alias: [
      {
        find: './runtimeConfig',
        replacement: './runtimeConfig.browser', // ensures browser compatible version of AWS JS SDK is used
      },
    ]
  }
})

tsConfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "allowJs": true,
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/aws-exports.js"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

package.json

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
},

Once you’ve completed these steps, you should see a login modal in your local environment. Initially, you’ll need to create an account, and then you can sign in using the Amplify Authenticator component.

Deploying Your Vue App with Amplify

You have two deployment options: continuous deployment and manual deployment. For this guide, we’ll cover manual deployment.

Navigate to your project’s root directory and execute the following command:

amplify add hosting

To publish your app, run the following command:

amplify publish

That’s it! Now your application is online.

To get the GitHub repo link, click here.

Conclusion

You will now have successfully created a Vue Amplify full-stack application. By leveraging the power of the cloud and a popular front-end framework Vue, developers can build feature-rich, scalable, and secure applications more efficiently.

Here is the official documentation for amplify-vue.

Happy coding!

For more updates on the latest tools and technologies, follow the Simform Engineering blog.
Follow us: Twitter | LinkedIn