Building a Vue 3 Notes App with AWS Amplify V2

Introduction

After the Summit, I decided for a while to give it a try to new amplify - boooom. You might be wondering why and this article is all about this :D and yes, that’s me in the left corner looking at the photo!

AWS Amplify has undergone a significant evolution with the introduction of Amplify V2, offering an improved developer experience and better integration with modern frontend frameworks like Vue 3. In this tutorial, we will build a simple notes application using Vue 3 and Amplify V2. The app will allow users to register, log in, and save notes in an Amazon DynamoDB table.

Prerequisites

Before we begin, ensure you have the following installed:

• Node.js (LTS recommended)
• AWS CLI (configured with an AWS account)
• Amplify CLI (install using npm install -g @aws-amplify/cli)
• Vue CLI (install using npm install -g @vue/cli)

Step 1: Initialize Vue 3 Project

First, create a new Vue 3 project using Vite:

npm create vite@latest vue3-notes --template vue
cd vue3-notes
npm install

Step 2: Initialize AWS Amplify V2

Run the following command to initialize Amplify in your project:

amplify init

Follow the prompts to configure your project. Once initialized, install the Amplify libraries:

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

Step 3: Configure Authentication

To enable user registration and login, add authentication to the project:

amplify add auth

Choose the default configuration. Then, deploy it:

amplify push

Update your main.js file to configure Amplify:

import { createApp } from 'vue';
import App from './App.vue';
import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';

Amplify.configure(awsExports);

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

Step 4: Add a DynamoDB Table for Notes

Run the following command to create a DynamoDB table for storing notes:

amplify add api

• Select GraphQL as the API type.
• Choose the default authorization as Amazon Cognito User Pools.
• Define the schema for our notes app:

type Note @model @auth(rules: [{ allow: owner }]) {
  id: ID!
  content: String!
}

Deploy the API:

amplify push

Step 5: Build the Vue 3 UI

Add Authentication UI

Create a components/Auth.vue file for user authentication:

<script setup>
import { onMounted } from 'vue';
import { Authenticator } from '@aws-amplify/ui-vue';
</script>

<template>
  <Authenticator>
    <template v-slot="{ signOut, user }">
      <div>
        <p>Welcome, {{ user.username }}!</p>
        <button @click="signOut">Sign out</button>
      </div>
    </template>
  </Authenticator>
</template>

Add Notes Management

Create a components/Notes.vue file:

<script setup>
import { ref, onMounted } from 'vue';
import { API } from 'aws-amplify';
import { listNotes } from '../graphql/queries';
import { createNote } from '../graphql/mutations';

const notes = ref([]);
const newNote = ref('');

async function fetchNotes() {
  const result = await API.graphql({ query: listNotes });
  notes.value = result.data.listNotes.items;
}

async function addNote() {
  if (!newNote.value) return;
  await API.graphql({
    query: createNote,
    variables: { input: { content: newNote.value } },
  });
  newNote.value = '';
  fetchNotes();
}

onMounted(fetchNotes);
</script>

<template>
  <div>
    <input v-model="newNote" placeholder="Enter a note" />
    <button @click="addNote">Add Note</button>
    <ul>
      <li v-for="note in notes" :key="note.id">{{ note.content }}</li>
    </ul>
  </div>
</template>

Update App.vue

Modify App.vue to include authentication and notes:

<script setup>
import Auth from './components/Auth.vue';
import Notes from './components/Notes.vue';
</script>

<template>
  <Auth />
  <Notes />
</template>

Step 6: Run and Test

Start your application:

npm run dev

Sign up with a new account, log in, and add notes. Your data will be stored securely in DynamoDB via Amplify’s API.

Conclusion

With Amplify V2, setting up authentication, a database, and API access in a Vue 3 application is straightforward. This setup provides a strong foundation for building and scaling applications with AWS services.

Happy coding!