Trabalhando com MongoDb e Nuxt 3

No desenvolvimento de aplicações web dinâmicas e escaláveis, a integração com um banco de dados robusto é essencial. O MongoDB se tornou uma escolha popular entre os desenvolvedores devido à sua flexibilidade e escalabilidade. Em conjunto com o framework Vue.js, o Nuxt.js proporciona uma base sólida para criar aplicações rápidas e renderizadas no servidor. No entanto, quase todos os sites modernos precisam de conexão com o banco de dados. A documentação do Nuxt3 não está concluída, portanto, alguns problemas não são tão claros quanto deveriam.

Neste tutorial, iremos explorar como incorporar o MongoDB e o Mongoose ao seu projeto Nuxt 3 para adicionar funcionalidade de anotações. Se você está dando os primeiros passos no desenvolvimento full-stack ou é um desenvolvedor experiente, este guia o ajudará a aproveitar ao máximo o MongoDB e o Mongoose no ecossistema do Nuxt.

Etapa 1: Configuração do projeto

Antes de começar, é importante ter um projeto funcional baseado no Nuxt 3. Caso ainda não possua um, você pode criar um novo projeto utilizando o seguinte comando.

npx nuxi init <nome-do-projeto>

Após criar o projeto, acesse o diretório e instale as dependências, rodando o seguinte comando:

yarn add mongoose nuxt-server-utils

Etapa 2: Fazendo a conexão

Existe duas maneira de você criar e se conectar ao seu banco de dados:

Utilizando plugin Nitro - na qual podemos criar nosso arquivo de conexão manualmente.

Utilizando o nuxt-server-utils - A primeira maneira não deixa ser ser fácil, porém o o nuxt-server-utils fornece um conjunto de utilitários que permitem que você interaja com seu banco de dados MongoDB de dentro de sua aplicação Nuxt.

Esse é método que iremos abordar aqui, utilizando o módulo instalado anteriormente.

Para se conectar ao banco de dados, você precisará da string de conexão. Em projetos do mundo real, geralmente é passado através de variáveis de ambiente. O Nuxt3 fornece auxiliares internos de configuração de tempo de execução para tornar o acesso ao env mais conveniente e seguro.

Em seu projeto, crie um arquivo na raiz do projeto, que contém a string de conexão: .env

MONGO_URL=mongodb://user:password@localhost:25017/database (pode ser sua url de produção)

Agora adicione o módulo nuxt-server-utils à seção do seu arquivo com sua chave de conexão: nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['nuxt-server-utils'],
  nuxtServerUtils: {
    mongodbUri: process.env.MONGODB_URI,
  }
});

Lembrando que você pode nomear sua variável no arquivo .env como e desejar!

A partir desse ponto se tudo ocorreu bem e sua aplicação está executando, você verá uma informação no terminal dizendo que a conexão foi bem sucedida:

Etapa 3: Criando suas models e rotas

Para que tudo funcione precisamos definir a Model para as anotações que serão armazenadas no MongoDB. No diretório server -> models, crie um novo arquivo chamado "note.model.ts" e adicione o seguinte código:

import { Schema, model } from 'mongoose'

const NoteSchema = new Schema({
  title: String,
  description: String,
  urlImage: {
    type: String,
    default: '',
    required: false
  }
}, {
  timestamps: {
    createdAt: 'created_at',
    updatedAt: 'updated_at'
  },
})

export const Note = model('Note', NoteSchema)

Agora que temos o Model de Anotação definido, podemos criar as rotas para a execução do CRUD nas anotações do banco de dados.

No diretório "api", crie um nova pasta chama "notes" e adicione o seguintes arquivos:

No Nuxt, os nomes de arquivo do identificador podem ser sufixados com , , , , ... para corresponder ao método HTTP da solicitação, por esse motivo criamos um para cada tipo de solicitação.

Index.ts

Esse arquivo será nosso principal, ou seja, quando tentar acessar /api/notes cairá nessa rota como padrão, com o método GET:

import { Note } from "~~/server/models/note.model";

export default defineEventHandler(async (event) => {
  const notes = await Note.find()

  return notes
})

create.post.ts

Como vimos, podemos sufixar nomes dos arquivos que automaticamente o nosso querido Nuxt já entende por debaixo dos panos. Esse arquivo aqui só aceitará chamadas com o método POST, se tentar algo diferente dará erro.

import { Note } from "~~/server/models/note.model";

export default defineEventHandler(async (event) => {
  const { title, description, urlImage } = await readBody(event);

  const newNote = await Note.create({ title, description, urlImage })

  return newNote
})

[id].delete.ts

Esse arquivo como percebeu tem um nome um pouco diferente. As rotas do servidor podem usar parâmetros dinâmicos entre colchetes no nome do arquivo e serem acessados. Aqui quer dizer que a rota esperará o ID de cada anotação e em nosso código usamos o composable getRouterParams para pega-lo.

import mongoose from 'mongoose'
import { Note } from "~~/server/models/note.model";

export default defineEventHandler(async (event) => {
  const { id } = getRouterParams(event);
  try {
    const deletedNote  = await Note.findOneAndDelete({ _id: new mongoose.Types.ObjectId(id) });

    if (deletedNote) {
      // Faça o que quiser com o documento excluído aqui, por exemplo, retorná-lo na resposta da API
      return { statusCode: 200, body: JSON.stringify(deletedNote) };
    } else {
      return { statusCode: 404, body: JSON.stringify({ message: 'Documento não encontrado' }) };
    }
  } catch (error) {
    return { statusCode: 500, body: JSON.stringify({ message: 'Erro ao excluir o documento' }) };
  }
})

Com esses arquivos criados agora sua API possui 3 endpoints:

1. Visualizar - localhost:3000/api/notes
2. Criar - localhost:3000/api/notes/create
3. Deletar - localhost:3000/api/notes/${id}

Em seguida, você pode usar ferramentas como o Postman ou o Insomnia para enviar uma requisição POST para a rota "/api/notes" com os campos "title" e "description" no corpo da requisição. Isso irá adicionar uma nova anotação ao banco de dados MongoDB.

Você pode encontrar o código-fonte completo deste exemplo aqui. O projeto está aberto, sinta-se livre para enviar melhorias nele.

Caso queira visualizar, acesse: https://mongoonuxt.vercel.app

Conclusão:

Neste tutorial, exploramos como adicionar funcionalidade de anotações ao seu projeto Nuxt 3 usando o MongoDB e o Mongoose. A combinação do MongoDB, Mongoose e Nuxt.js permite que você crie aplicações poderosas e flexíveis. Aproveite essa funcionalidade para criar aplicativos web ainda mais robustos e com capacidades de gerenciamento de dados avançadas.

Se tiver alguma dúvida, não hesite em perguntar. Forte abraços