Initial Setup
We need to create a new project.
Then we open our nuxt.config.ts file. And replace it with the following.
Run the setup CLI.
And finally just follow the default steps. Make sure you select your framework as Nuxt
That is all the setup done! All we need to do now is add the input and button components.
Build a basic app
Amazing, now let’s make ourselves a quick landing page. Replace the following code in your app.vue file.
This should all do the job! We now need an endpoint to send the signup request to, along with the users actual email address.
Backend with Resend
Now we can implement Resends logic. First we need create an account with Resend and get your API key.
Once you have your API key. You should create a .env file at the root of your directory and add the API key here.
Now we need to create an endpoint that will handle adding the email address to our resend audience and sending them a thankyou email.
Create a new file in server/api/newsletter.post.ts and add the following code.
Finally all that is left to do is to hook the frontend up to this api call
Now just add this function to your current frontend
And we have a working newsletter!