Just Released: Nuxt Hub Multi-Vendor and First-Class DB

Nuxt labs just released a new version of Nuxt Hub that brings multi-vendor support and a first-class database ORM with Drizzle and honestly I haven't been this excited in a long time! 🤩

What's so special about this new minor version?

2 anwers:

1. Deploy Nuxt Hub Anywhere
2. First-Class Database Experience (👈 This is the most exciting part IMO)

Deploy Nuxt Hub Anywhere

Now you can deploy Nuxt Hub on any hosting provider that you want! Initially they only supported Cloudflare but now you could deploy to:

• Vercel
• Netlify
• Hetzner
• Anywhere else you want that can run JavaScript!

My personal host of choice is Netlify. I was able to clone the example nuxt hub project here, setup a new DB for it on Turso (because Netlify doesn't support a DB out of the box), and then deploy it to Netlify in no time. The only steps it required was adding the proper .env variables and changing the db config in nuxt.config.ts like so:

// nuxt.config.ts
export default defineNuxtConfig({
  hub: {
    db: {
      dialect: "sqlite",
      connection: {
        url: process.env.DATABASE_URL, // 👈 from Turso
        authToken: process.env.DATABASE_AUTH_TOKEN, // 👈 from Turso
      },
    },
  },
});

BUT this is NOT the most exciting part IMO. What is?

First-Class Database Experience

The new first class support for Drizzle ORM as the standard layer for database operations is a game changer. Not because of the ORM itself (though it is awesome!), but because the standardization means 1 giant benefit:

👉 Modules and layers now have a plug-and-play method for creating new database tables.

So what?

So now the modularity of Nuxt is expanded infinitely!

• Auth layers can automatically create user tables
• Blog layers can automatically create blog posts tables
• E-commerce layers can automatically create products tables
• and on and on and on...

Sure useStorage gave modules a way to persist data in KV stores, but database tables are a completely different beast and the MOST FLEXIBLE and scalable way to store most server-side data.

With the abilty to extend the databases schema with Nuxt hooks, modules/layers can now tap into that power:

// my-module/index.ts
export default defineNuxtModule({
  setup(options, nuxt) {
    nuxt.hook("hub:db:schema:extend", async ({ dialect, paths }) => {
      paths.push(await resolvePath(`./schema/my-table.${dialect}`));
    });
  },
});

Notice the dialect argument? That's the database dialect that the module is extending, meaning modules can be flexible enough to work with the end-project database dialect of choice!

So what will you build with this new superpower?

Me, I think I will get back to the email layer I built for our course: Authoring Nuxt Layers: Build a Custom Email Layer and add a new table for the sent emails!