⚡ Gabriel Caiana
imagem principal do site

Armazenamento Persistente no Nuxt com Unstorage


Se você já precisou salvar dados no lado do servidor usando Nuxt — e queria algo simples, mas flexível — provavelmente sentiu falta de uma forma nativa de persistir informações entre restarts da aplicação.

É aí que entra o unstorage, uma solução minimalista, modular e poderosa para armazenamento persistente no Nuxt. E o melhor: ele já vem pronto para uso com o Nuxt 3+ e aceita drivers para Redis, Cloudflare KV, SQLite, filesystem, entre outros.

Hoje vamos ver como configurar isso do zero — sem mistério — com exemplos práticos usando Redis e Cloudflare KV.


🧠 O que é o unstorage?

É uma lib criada pelo time da UnJS (os mesmos por trás do Nuxt) para servir como camada de abstração de storage. Com ele, você pode salvar dados no disco, em memória, em um banco remoto (como Redis), e até em serviços como Cloudflare KV — tudo usando a mesma API.

E o Nuxt já suporta isso de forma integrada.


📁 Estrutura de storage no Nuxt

O Nuxt permite configurar drivers de armazenamento dentro do diretório:

/server/storage/

Cada diretório ou arquivo .json ali representa um namespace (ou bucket) no storage.


🚀 Exemplo 1: Configurando Unstorage com Redis

1. Instale o driver:

npm install @unstorage/drivers

Redis exige que você tenha uma instância ativa (local, Docker ou cloud).

2. Crie o plugin para configurar o driver

// plugins/unstorage.redis.ts
import { defineNitroPlugin } from 'nitropack';
import { createStorage } from 'unstorage';
import redisDriver from '@unstorage/drivers/redis';

export default defineNitroPlugin(async (nitroApp) => {
  const storage = createStorage({
    driver: redisDriver({
      url: 'redis://localhost:6379',
    }),
  });

  nitroApp.storage.setMount('/redis', storage);
});

3. Usando o storage em uma API route

// server/api/favoritos.post.ts

export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  const { userId, produtoId } = body;

  await useStorage('redis').setItem(`favoritos:${userId}`, produtoId);

  return { ok: true };
});

Agora você está salvando dados persistentes no Redis, com uma linha de código.


☁️ Exemplo 2: Usando Cloudflare KV

Cloudflare KV é ótimo para key-value storage ultra rápido e global. Ideal para apps serverless ou distribuídos.

1. Crie um plugin custom com driver KV:

// plugins/unstorage.kv.ts
import { defineNitroPlugin } from 'nitropack';
import { createStorage } from 'unstorage';
import cloudflareKVDriver from '@unstorage/drivers/cloudflare-kv';

export default defineNitroPlugin(async (nitroApp) => {
  const storage = createStorage({
    driver: cloudflareKVDriver({
      accountId: process.env.CLOUDFLARE_ACCOUNT_ID!,
      namespaceId: process.env.CLOUDFLARE_KV_NAMESPACE!,
      apiToken: process.env.CLOUDFLARE_API_TOKEN!,
    }),
  });

  nitroApp.storage.setMount('/kv', storage);
});

2. Armazenando dados:

// server/api/visitas.ts

export default defineEventHandler(async () => {
  const count = (await useStorage('kv').getItem<number>('visitas')) || 0;
  await useStorage('kv').setItem('visitas', count + 1);
  return { visitas: count + 1 };
});

Simples assim, seu contador de visitas agora está salvo globalmente, com persistência via Cloudflare.


📌 Dica: Use .getItem, .setItem e .removeItem

A API do unstorage é super simples e lembra localStorage, só que funciona do lado do servidor:

await useStorage('redis').setItem('chave', 'valor');
const valor = await useStorage('redis').getItem('chave');
await useStorage('redis').removeItem('chave');

📚 Fontes oficiais (vale salvar nos favoritos):


✨ Conclusão

Se você quer armazenar dados persistentes em uma aplicação Nuxt, o unstorage é a forma mais limpa, elegante e extensível. Ele te dá a liberdade de trocar de provider (Redis, SQLite, filesystem, KV…) sem mudar sua lógica.

Para e-commerces, SaaS, dashboards ou microserviços — é uma ferramenta que vale muito ter no cinto.