MongoDB Nuxt Module

MongoDB Nuxt (3) Module to connect Nuxt Front-end to a MongoDB Database using Nitro server engine and global defined Nuxt plugins for a fast, easy and extensive integration.

Key Features

• Easy integration by adding full Connection String or add credentials / params
• Auto-generating URI / connection string
• Default server route implemented for communication to Nitro server where requests get handled towards MongoDB
• Request handling by Nitro server to keep credentials SSR and safe
• Out of the box Nuxt plugins added for easy implementation within clientside and execute CRUD operation
• Nuxt 3 support

Setup

In order to use this module, please provide the following steps.

1. Add dependancy - not available as npm package (yet)

Using yarn:

$ yarn add nuxt-mongodb

Using npm:

$ npm i nuxt-mongodb

2. Add Nuxt Options

add nuxt-mongodb to your Nuxt Options:

// nuxt.config.ts

export default defineNuxtConfig({
  ...
  modules: ['nuxt-mongodb'],
  ...
})

3. Add MongoDB Connection String / Credentials

Either add the credentials either by adding values to process.env or nuxt options. Choose between adding uri or params.

Env Variables

Connection String

# URI
MONGODB_URI=""

• or -

Params

# PARAMS
MONGODB_USERNAME=""
MONGODB_PASSWORD=""
MONGODB_HOST=""
MONGODB_DATABASE=""
MONGODB_OPTIONS=""
MONGODB_CLUSTER_URL=""

Nuxt Options

Connection String

// nuxt.config.ts

export default defineNuxtConfig({
  ...
  mongoDb: {
    uri: '', 
  }
  ...
})

Params

// nuxt.config.ts

export default defineNuxtConfig({
  ...
  mongoDb: {
    username: '', 
    password: '', 
    host: '', 
    database: '', 
    options: '', 
    clusterUrl: '', 
  }
  ...
})

Please visit the official MongoDB docs for a complete overview of options

Plugin usage

In order to use plugin, the global $mongo variable is exposed. This variable hooks into your database and can operate on it's given collection by making direct usage of Mongo DB's collection operations.

Retrieve plugin in Vue Composition API setup

<script setup>
const { $mongo } = useNuxtApp()
</script>

Plugin syntax

$mongo.[operation](arg1: Payload, arg2: Collection, arg3: Database)

Example usage

<script setup>
const { $mongo } = useNuxtApp()
const { data } = await $mongo.find({ name: 'Riviera Caterer' }, 'restaurants')
</script>

Please visit the official MongoDB docs for a complete overview of operations.

Development

• Run npm run dev:prepare to generate type stubs.
• Use npm run dev to start playground in development mode.