Skip to content

Commit d10328a

Browse files
smarroufinsmarroufin
committed
chore(docs): update
1 parent fbb042b commit d10328a

File tree

8 files changed

+173
-55
lines changed

8 files changed

+173
-55
lines changed

‎docs/content/1.getting-started/1.index.md

+6-45
Original file line numberDiff line numberDiff line change
@@ -3,51 +3,12 @@ title: Introduction
33
description: Welcome to NuxtHub documentation.
44
---
55

6-
This template is a ready-to-use documentation template made with [Nuxt UI Pro](https://ui.nuxt.com/pro), a collection of premium components built on top of [Nuxt UI](https://ui.nuxt.com) to create beautiful & responsive Nuxt applications in minutes.
7-
8-
There are already many websites based on this template:
9-
10-
- [Nuxt](https://nuxt.com) - The Nuxt website
11-
- [Nuxt UI](https://ui.nuxt.com) - The documentation of `@nuxt/ui` and `@nuxt/ui-pro`
12-
- [Nuxt Image](https://image.nuxt.com) - The documentation of `@nuxt/image`
13-
- [Nuxt Content](https://content.nuxt.com) - The documentation of `@nuxt/content`
14-
- [Nuxt Devtools](https://devtools.nuxt.com) - The documentation of `@nuxt/devtools`
15-
- [Nuxt Studio](https://nuxt.studio) - The pro version of Nuxt Content
6+
NuxtHub is a Nuxt Toolkit to create full-stack applications on the Edge. It is powered by Cloudflare Pages and leverages many Cloudflare features like KV, D1 and R2 to allow a complete backend experience.
167

178
## Features
189

19-
- Powered by [Nuxt 3](https://nuxt.com)
20-
- Built with [Nuxt UI](https://ui.nuxt.com) and [Nuxt UI Pro](https://ui.nuxt.com/pro)
21-
- Write content with [MDC syntax](https://content.nuxt.com/usage/markdown) thanks to [Nuxt Content](https://content.nuxt.com)
22-
- Compatible with [Nuxt Studio](https://nuxt.studio)
23-
- Auto-generated sidebar navigation
24-
- Full-Text Search out of the box
25-
- Beautiful Typography styles
26-
- Dark mode support
27-
- And more...
28-
29-
## Play online
30-
31-
You can start playing with this template in your browser using our online sandboxes:
32-
33-
::u-button
34-
---
35-
class: mr-4
36-
icon: i-simple-icons-stackblitz
37-
label: Play on StackBlitz
38-
target: _blank
39-
to: https://stackblitz.com/github/nuxt-ui-pro/docs/
40-
---
41-
::
42-
43-
::u-button
44-
---
45-
class: mt-2 sm:mt-0
46-
icon: i-simple-icons-codesandbox
47-
label: Play on CodeSandbox
48-
target: _blank
49-
to: https://codesandbox.io/s/github/nuxt-ui-pro/docs/
50-
---
51-
::
52-
53-
Or open [Nuxt UI playground](https://ui.nuxt.com/playground).
10+
- Session management
11+
- Query a SQLite database with [Database](/usage/database)
12+
- Access key-value storage with [KV](/usage/kv)
13+
- Store files with [Blob](/usage/blob)
14+
- Track events with [Analytics](/usage/analytics)

‎docs/content/1.getting-started/2.installation.md

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
title: Installation
3+
description: How to use NuxtHub in a project.
4+
---
5+
6+
Begin your journey with NuxtHub using this step-by-step tutorial, designed for developers seeking an all-in-one platform to create and deploy web applications.
7+
8+
## Setup
9+
10+
1. Install NuxtHub module to your project:
11+
12+
::code-group
13+
14+
```bash [pnpm]
15+
pnpm add @nuxthub/core
16+
```
17+
18+
```bash [yarn]
19+
yarn add @nuxthub/core
20+
```
21+
22+
```bash [npm]
23+
npm install @nuxthub/core
24+
```
25+
26+
```bash [bun]
27+
bun add @nuxthub/core
28+
```
29+
30+
::
31+
32+
2. Add it to your `modules` section in your `nuxt.config`:
33+
34+
```ts [nuxt.config.ts]
35+
export default defineNuxtConfig({
36+
modules: ['@nuxthub/core']
37+
})
38+
```
39+
40+
## Options
41+
42+
| Key | Default | Description |
43+
|-----------------------|-----------------|-------------------------------------------------------------------------------------------------------------|
44+
| `local` | `false` | Allows working in local with production Cloudflare services. |
45+
46+
Configure options in your `nuxt.config.ts` as such:
47+
48+
```ts [nuxt.config.ts]
49+
export default defineNuxtConfig({
50+
modules: ['@nuxthub/core'],
51+
hub: {
52+
local: true
53+
}
54+
})
55+
```
56+
57+
You're all set! Now, let's dive into connecting to your Cloudflare account and deploying it on the Edge.

‎docs/content/1.getting-started/3.deploy.md

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
title: Deploy
3+
description: How to deploy your project with NuxtHub.
4+
---
5+
6+
To deploy your Nuxt application on the Edge, we use Cloudflare Pages. Therefore, we require you to create a [Cloudflare](https://www.cloudflare.com/){target=_blank} account.
7+
8+
Then two options are offered to you:
9+
10+
## Using hub.nuxt.com
11+
12+
The [NuxtHub admin](https://hub.nuxt.com){target=_blank} is designed to simplify your experience with the NuxtHub module, enabling you to effortlessly manage teams and projects, as well as deploy in seconds combined with the NuxtHub CLI.
13+
14+
### Setup your team
15+
16+
First, you need to connect to [NuxtHub admin](https://hub.nuxt.com){target=_blank}. A default team is automatically created for you and you will be able to update it in the settings.
17+
18+
Next, you are invited to setup your team with Cloudflare, meaning you need to link it to your Cloudflare account. Follow the instructions by creating an access token on Cloudflare, then linking it to the team in the admin.
19+
20+
Done? Now your team is connected to Cloudflare.
21+
22+
### Setup your project
23+
24+
From here, you can either create your project in the admin or with the CLI.
25+
26+
#### Admin
27+
28+
<!-- TODO -->
29+
30+
#### CLI
31+
32+
Then, install NuxtHub CLI with any binaries manager (we recommand Volta.sh):
33+
34+
```bash
35+
volta install nuxthub
36+
```
37+
38+
Then open a terminal in at the root of your project and run:
39+
40+
```bash
41+
nuxthub deploy
42+
```
43+
44+
This command will:
45+
46+
1. Ask you to connect to hub.nuxt.com, if not already logged in
47+
2. Link your local project with a NuxtHub project, if not already linked
48+
- Select a team
49+
- Select or create a project
50+
3. ?
51+
52+
<!-- TODO -->
53+
54+
## On your own
55+
56+
Even if you don't want to use NuxtHub admin, you can use the NuxtHub module.
57+
58+
<!-- TODO -->

‎docs/content/2.usage/1.database.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
title: Database
3+
description: How to create a database and store entries with NuxtHub.
4+
---
5+
6+
NuxtHub Database is a layer to [Cloudflare D1](https://developers.cloudflare.com/d1), serverless SQL databases.
7+
8+
<!-- TODO: config, binding ? -->
9+
10+
Once properly configured, NuxtHub module exposes a server composable to your application.
11+
12+
## `useDB()`

‎docs/content/2.usage/2.kv.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
title: KV
3+
description: How to use key-value data storage with NuxtHub.
4+
---
5+
6+
NuxtHub KV is a layer to [Cloudflare Workers KV](https://developers.cloudflare.com/kv), a global, low-latency, key-value data storage.

‎docs/content/2.usage/3.blob.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
title: Blob
3+
description: How to store objects with NuxtHub.
4+
---
5+
6+
NuxtHub Blob is a layer to [Cloudflare R2](https://developers.cloudflare.com/r2), allowing to store large amounts of unstructured data.

‎docs/content/2.usage/4.analytics.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
title: Analytics
3+
description: How to track events with NuxtHub.
4+
---
5+
6+
NuxtHub Analytics is a layer to [Cloudflare Workers Analytics Engine](https://developers.cloudflare.com/analytics/analytics-engine/), allowing to get analytics about anything.

‎docs/content/index.yml

+22-10
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
title: 'NuxtHub'
2-
description: 'Welcome to NuxtHub documentation.'
2+
description: 'The Nuxt Toolkit to create full-stack applications on the Edge.'
33
navigation: false
44
hero:
5-
title: 'Full Stack Nuxt app in the Edge'
6-
description: 'Deploy a Full Stack Nuxt app using NuxtHub powered by CloudFlare'
5+
title: 'Nuxt,<br>Full-Stack,<br>on the Edge'
6+
description: 'The Nuxt Toolkit to create full-stack applications on the Edge powered by Cloudflare.'
77
orientation: horizontal
88
links:
99
- label: Get started
@@ -22,29 +22,41 @@ hero:
2222
npx nuxthub deploy
2323
```
2424
features:
25-
title: 'All-in-one docs template'
25+
title: 'All you need for full-stack apps'
2626
links:
2727
- label: Get started
2828
icon: i-heroicons-arrow-right-20-solid
2929
trailing: true
3030
to: '/getting-started'
3131
size: lg
3232
items:
33+
- title: 'Database'
34+
description: 'SQLite model-oriented databases with auto-migrations.'
35+
icon: 'i-ph-database'
36+
to: '/usage/database'
37+
- title: 'KV'
38+
description: 'Global, low-latency, key-value data storage.'
39+
icon: 'i-ph-coin'
40+
to: '/usage/kv'
41+
- title: 'Blob'
42+
description: 'Large storage of unstructured data.'
43+
icon: 'i-ph-shapes'
44+
to: '/usage/blob'
3345
- title: 'Nuxt 3'
3446
description: 'Powered by Nuxt 3 for optimal performances and SEO.'
3547
icon: 'i-simple-icons-nuxtdotjs'
3648
to: 'https://nuxt.com'
3749
target: '_blank'
38-
- title: 'CloudFlare'
39-
description: 'Using CloudFlare pages for edge rendering.'
50+
- title: 'Cloudflare Pages'
51+
description: 'Using Cloudflare Pages for edge rendering.'
4052
icon: 'i-simple-icons-cloudflare'
41-
to: 'https://content.nuxt.com'
53+
to: 'https://developers.cloudflare.com/pages'
4254
target: '_blank'
55+
- title: 'NuxtHub CLI'
56+
description: 'A powerful, yet simple, CLI to deploy in seconds on the edge.'
57+
icon: 'i-ph-terminal'
4358
- title: 'NuxtHub Admin'
4459
description: 'Offers an admin to manage your project as a team.'
4560
icon: 'i-heroicons-user-group-solid'
4661
to: 'https://hub.nuxt.com'
4762
target: '_blank'
48-
- title: 'NuxtHub CLI'
49-
description: 'A powerful, yet simple, CLI to deploy in seconds on the edge.'
50-
icon: 'i-ph-terminal'

0 commit comments

Comments
 (0)