Nuxt is an intuitive framework that takes your Vue applications and brings it to a new level! It can take your Vue 2/3 app and add static site generation, and server side rendering! In addition, it supports API routes, file system routing, data fetching and more!
Amplify, on the other hand, is a set of tools that allows full-stack web and mobile developers the ability to create and build apps using AWS services.
With these two together you can build some really powerful apps!
Want to get started now? Check out my video and jump on in!
What Are We Building?
Today we are building a Nuxt 3 application with authentication backed by Amplify!
We'll imagine that we need our entire application protected, and only authorized users can access it. We'll allow users to login and create an account!
Setup
We are going to assume you are starting a Nuxt app from scratch without any prior knowledge of Amplify. Feel free to jump to the next section if this is not the case!
Let's begin by creating a brand new app
npx nuxi init nuxt3-app
After the app is generated change directory to the newly created folder.
cd nuxt3-app
Install the aws-amplify and @aws-amplify/ui-vue dependencies.
npm i @aws-amplify/ui-vue aws-amplify
If this is the first time using Amplify you'll need to install the Amplify CLI. This tool will help us setup and add Amplify's services.
npm i @aws-amplify/cli
Next, we'll run configure. This will connect our CLI tool with our AWS account.
Don't have an AWS account? Sign up and get 12 months free!
amplify configure
Finally, we'll run an init command to setup our project!
amplify init
Hit enter through all the defaults and you should be ready to go!
Adding Authentication
Adding authentication to your application with Amplify only takes one command on the CLI.
amplify add auth
Make sure to follow the prompts. Choose Email and the Default configuration.
Do you want to use the default authentication and security configuration? Default configuration
Do you want to use the default authentication and security configuration? Default configuration
Warning: you will not be able to edit these selections.
How do you want users to be able to sign in? Email
Do you want to configure advanced settings? No, I am done.
Now we can push our changes to Amplify!
amplify push
Choose Y!
? Are you sure you want to continue? (Y/n) y
If you look inside your folder structure in your Nuxt app, you may notice some new folders. Don't worry, these are configuration files for Amplify, we won't need to touch them for this tutorial.
We are done with the command line for now. Let's setup the Nuxt app so it can use this new authentication resource.
Nuxt Setup
Let's jump into our nuxt.config.ts file and add some configurations for Amplify.
// nuxt.config.ts
export default defineNuxtConfig({
alias: {
"./runtimeConfig": "./runtimeConfig.browser"
},
vite: {
define: {
"window.global": {}
}
}
});
Nuxt uses vite under the covers as a build tool. These options will help Nuxt and Vite properly build.
Let's create a plugin for Amplify. This plugin file will configure Amplify and make it available throughout the app.
Create a new plugins folder in the root of the project and add a amplify.ts file to it.
import { defineNuxtPlugin } from "#app";
import { Amplify, Auth } from "aws-amplify";
import aws_exports from "../src/aws-exports";
export default defineNuxtPlugin((nuxtApp) => {
Amplify.configure(aws_exports);
return {
provide: {
auth: Auth,
},
};
});
The aws_exports file was generated after you ran amplify push. This file holds all the keys needed for the Amplify JavaScript library to access all the resources you created. By adding the provide you can now access auth with $auth anywhere in your app.
We are now ready to add the Authenticator to our application. This will be in our app.vue file.
<script setup lang="ts">
import { Authenticator } from "@aws-amplify/ui-vue";
import "@aws-amplify/ui-vue/styles.css";
</script>
<template>
<div>
<Authenticator>
<template v-slot="{ user, signOut }">
<h1>Hello {{ user.username }}!</h1>
<button @click="signOut">Sign Out</button>
</template>
</Authenticator>
</div>
</template>
Don't forget to add the import for styles as seen above! Otherwise your Authenticator will not render properly.
In the code example above anything between the opening and closing brackets inside the template will only appear after the user is logged in.
Test It Out!
Go ahead and start your Nuxt app
npm run dev
Congratulations! You now have created a Nuxt.js application with authentication!
Go ahead and try to create an account, and sign in. Make sure to put in a valid email address, so you can verify your account during the sign up process.
After signing in you'll see a message like this!
Conclusion
In this post we've created a new Nuxt 3 application, added in Amplify with authentication, and setup our app to use Amplify with the Authenticator connected component!
So your next question probably is, where do we go from here? Well, with Amplify setup we can now add in authenticated apis backed by Lambda, storage, and even AppSync our managed GraphQL service!
Leave a comment below on what you'd like to learn next! Or tweet me at @ErikCH with what you learned and I'll pick someone at random for a special prize!
Top comments (1)
@erikch you saved me from my deadline in fixing the aws-amplify setup in nuxt 3 with vite.
Thanks a lot!!!!!