Learn how to use Mongoose object modeling with MondoDB Atlas and Nuxt.

Building a Todo app with Nuxt and Mongoose is extremely easy! I’ve been building with Firebase for years, but this was almost easier!

TL;DR

This app connects to MongoDB Atlas and uses nuxt-mongoose to easily configure a document schema for a todo app. The app is easy to create thanks to the Mongoose JS.

Nuxt App Setup

📝 Make sure to install Tailwind.

Create a Mongo Atlas Account

Click the “Drivers” to get your connection string.

.env

Set your connection string in your nuxt enivornment variable inside the .env file at the root.

Install Nuxt Mongoose

Install Nuxt Mongoose with:

And configure nuxt.config.ts:

Create the Todo Model

You can read about the schema at official mongoose guide.

📝 The timestamps options auto configures updatedAt and createdAt for you on each document.

Configure Todo API Routes

We need to CRUD the Todo Documents.

Create Todo

The model allows use to easily use the create() command to create a document. The h3 package allows us to handle the errors with createError() and get data with readBody().

Get Todos

We want to sort the data by createdAt descending, and use lean() to only get the field data, not the meta data.

Delete Todo

We delete by ID.

Update Todo

We update the document by ID.

📝 returnDocument: ‘after’ – We want the state after the change.

📝 runValidators: true – The update must match the schema rules.

Todo Composable

We can call the API routes and use good separate of concerns by creating a Todo Composable.

Frontend Types

And import them in the composable.

📝 deletingId and togglingId are used just like isSubmitting to validate the fetch process.

📝 You could also use Nuxt Form Actions, although I just went straight $fetch here.

Todo Components

Our parent component displays the Todo Form Component and the Todo List Component after Prop Drilling.

Parent

📝 I usually like to use shared state with useState, but I found prop drilling to be cleaner here.

Todo Form

This displays the add a todo form.

When submitted, we must reset the form and show a message if necessary.

Todo List

Every time there is a refresh, we list the todos.

📝 Notice the arial-label and title for accessibility.

📝 deletingId and togglingId are used to handle state changes.

Database

Once you run the app, you will see your data in Atlas.

Final Review

I honestly thought configuring Mongoose was going to be a pain. I have been building with Firebase since Firestore was released, and I thought Mongo DB would be different. has come a LONG way, and pretty much configures it for you.

The only negative with mongoose is the lack of built-in authentication support. There is, however, a better-auth adapter. You also can’t do anything on the client/browser like you can with Firebase or Supabase, but these days I’m OK with that!

Honestly, this was fun to build.

Repo: GitHub