Installation

Learn how to create a NuxtHub project or add it to your current Nuxt project.

Quickstart

The easiest way to get started with NuxtHub is to start with one of our templates. It includes all the necessary configuration and resources to get you started.

Click on the GitHub button, then once on GitHub, click on Use this template to create a new repository based on the template.

Explore NuxtHub templates.

CLI

Run this command to create a new project locally using our hello-edge template:

Terminal
npx nuxthub init my-app

Then, inside your project directory (my-app in the example above), run your development server:

Terminal
npm run dev

Your project will be available on http://localhost:3000

Add to a Nuxt project

  1. Install the NuxtHub module to your project:
Terminal
npx nuxi module add hub

This command will install @nuxthub/core as dependency and add it to your modules section of your nuxt.config.

  1. Install wrangler development dependency to your project:
pnpm add -D wrangler

That's it! You can now use NuxtHub features in your Nuxt project.

NuxtHub will create a .data/hub directory in your project root, which contains the necessary configuration files and resources for the features to work. It will also add it to the .gitignore file to avoid committing it to your repository.

Options

Configure options in your nuxt.config.ts as such:

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxthub/core'],
  hub: {
    // NuxtHub options
  }
})
analytics
boolean

Default to false - Enables analytics for your project (coming soon).

blob
boolean

Default to false - Enables blob storage to store static assets, such as images, videos and more.

cache
boolean

Default to false - Enables cache storage to cache your server route responses or functions using Nitro's cachedEventHandler and cachedFunction

database
boolean

Default to false - Enables SQL database to store your application's data.

kv
boolean

Default to false - Enables Key-Value to store JSON data accessible globally.

remote
boolean|string

Default to false - Allows working with remote storage (database, kv, blob) from your deployed project.
Read more about remote storage for usage.

dir
string

Default to '.data/hub' - The directory used for storage (D1, KV, R2, etc.) in development mode.

You're all set! Now, let's dive into connecting to your Cloudflare account and deploying it on the Edge.

Nightly Builds

You can also use the latest features and bug fixes (commited on the main branch) by installing the nightly tag:

package.json
{
  "Dependencies": {
-   "@nuxthub/core": "^0.5.0"
+   "@nuxthub/core": "npm:@nuxthub/core@nightly"
  }
}

Then run npm install, pnpm install, yarn install or bun install to update the dependency.