|
1 | 1 | --- |
2 | | -title: Introduction |
3 | | -description: NuxtHub helps you build full-stack applications on the Edge. |
| 2 | +navigation.title: Introduction |
| 3 | +title: What is NuxtHub? |
| 4 | +description: NuxtHub helps you build and deploy full-stack Nuxt applications globally. |
4 | 5 | --- |
5 | 6 |
|
6 | | -NuxtHub aims to provide a complete backend experience for [Nuxt](https://nuxt.com) apps, allowing developers to build full-stack applications on the Edge, read more about [Nuxt on the edge](https://nuxt.com/blog/nuxt-on-the-edge). |
| 7 | +On top of deploying your Nuxt application, NuxtHub aims to provide a complete backend experience on top of the framework, allowing developers to build full-stack applications on the Edge, read more about [Nuxt on the Edge](https://nuxt.com/blog/nuxt-on-the-edge). |
7 | 8 |
|
8 | | -::callout |
9 | | -It is **currently made to be deployed on [Cloudflare Pages](https://pages.cloudflare.com)** as it leverages many Cloudflare features such as KV, D1, and R2. We are looking to support other platforms in the future. |
| 9 | +It leverages Cloudflare features such as Pages, Workers Analytics, AI, KV, D1, R2 and more. |
| 10 | + |
| 11 | +::tip |
| 12 | +**NuxtHub is what Vercel / Netlify is for AWS, but for Cloudflare.** :br |
| 13 | +It also deploys to your Cloudflare account so you stay in control of your data and billing as we don't mark-up Cloudflare prices. |
10 | 14 | :: |
11 | 15 |
|
12 | 16 | ## Features |
13 | 17 |
|
14 | | -NuxtHub provides multiple features to help you build full-stack applications: |
15 | | -- **SQL database** to store your application's data with [`hubDatabase()`](/docs/storage/database) |
16 | | -- **Key-Value** to store JSON data accessible globally with low-latency with [`hubKV()`](/docs/storage/kv) |
17 | | -- **Blob storage** to store static assets, such as images, videos and more with [`hubBlob()`](/docs/storage/blob) |
18 | | -- **Cache storage** to cache your server route responses or functions using Nitro's [`cachedEventHandler`](https://nitro.unjs.io/guide/cache#cached-event-handlers) and [`cachedFunction`](https://nitro.unjs.io/guide/cache#cached-functions) |
19 | | - |
20 | | -Each storage utils is auto-imported and configured to be used in your [Nuxt's server directory](https://nuxt.com/docs/guide/directory-structure/server). |
| 18 | +NuxtHub provides optional features to help you build full-stack applications: |
| 19 | +- [AI Models](/docs/features/ai) to run machine learning models, such as LLMs in Nuxt. |
| 20 | +- [Blob storage](/docs/features/blob) to store static assets, such as images, videos and more |
| 21 | +- [Caching system](/docs/features/cache) for your Nuxt pages, API routes or server functions |
| 22 | +- [SQL database](/docs/features/database) to store your application's data |
| 23 | +- [Key-Value](/docs/features/kv) to store JSON data accessible globally with low-latency |
| 24 | +- [Open API](/docs/features/open-api) to generate your API documentation with [Scalar](https://scalar.com) |
21 | 25 |
|
22 | | -::callout{icon="i-ph-plugs-connected-duotone" to="/docs/getting-started/deploy#remote-storage"} |
| 26 | +::tip{icon="i-ph-plugs-connected-duotone" to="/docs/getting-started/remote-storage"} |
23 | 27 | NuxtHub comes with a powerful proxy system to connect to your project's resources from your local environment, allowing you to work with your remote storage as if it was local with `npx nuxi dev --remote`. |
24 | 28 | :: |
25 | 29 |
|
26 | | -## Packages |
27 | | - |
28 | | -We plan to provide a complete backend experience for Nuxt apps through various `@nuxthub` packages. |
29 | | - |
30 | | -- [`@nuxthub/core`](https://github.com/nuxt-hub/core): Main package to provide storage features |
31 | | -- `@nuxthub/auth`: Add authentication for user management (soon) |
32 | | -- `@nuxthub/email`: Send transactional emails to your users (soon) |
33 | | -- `@nuxthub/analytics`: Understand your traffic and track events within your application and API (soon) |
34 | | -- `@nuxthub/...`: You name it! |
35 | | - |
36 | | -::important |
37 | | -We are currently in the early stages of development (beta) and are looking for feedback from the community. If you are interested in contributing, please join us on [nuxt-hub/core](https://github.com/nuxt-hub/core). |
38 | | -:: |
39 | | - |
40 | | -## Admin |
| 30 | +## NuxtHub Admin |
41 | 31 |
|
42 | 32 | ::tabs |
43 | 33 | ::div{label="Projects"} |
44 | | -[{class="border rounded dark:border-gray-700 border-gray-200"}](https://admin.hub.nuxt.com) |
| 34 | +{class="border rounded dark:border-gray-700 border-gray-200" data-zoom-src="/images/landing/nuxthub-admin.png"} |
45 | 35 | :: |
46 | 36 | ::div{label="Deployments"} |
47 | | -[{class="border rounded dark:border-gray-700 border-gray-200"}](https://admin.hub.nuxt.com) |
| 37 | +{class="border rounded dark:border-gray-700 border-gray-200" data-zoom-src="/images/landing/nuxthub-admin-project.png"} |
48 | 38 | :: |
49 | 39 | ::div{label="Database"} |
50 | | -[{class="border rounded dark:border-gray-700 border-gray-200"}](https://admin.hub.nuxt.com) |
| 40 | +{class="border rounded dark:border-gray-700 border-gray-200" data-zoom-src="/images/landing/nuxthub-admin-database.png"} |
| 41 | +:: |
| 42 | +::div{label="KV"} |
| 43 | +{class="border rounded dark:border-gray-700 border-gray-200" data-zoom-src="/images/landing/nuxthub-admin-kv.png"} |
| 44 | +:: |
| 45 | +::div{label="Blob"} |
| 46 | +{class="border rounded dark:border-gray-700 border-gray-200" data-zoom-src="/images/landing/nuxthub-admin-blob.png"} |
| 47 | +:: |
| 48 | +::div{label="Logs"} |
| 49 | +{class="border rounded dark:border-gray-700 border-gray-200" data-zoom-src="/images/landing/nuxthub-admin-server-logs.png"} |
| 50 | +:: |
| 51 | +::div{label="Open API"} |
| 52 | +{class="border rounded dark:border-gray-700 border-gray-200" data-zoom-src="/images/landing/nuxthub-admin-open-api.png"} |
| 53 | +:: |
| 54 | +::div{label="Cache"} |
| 55 | +{class="border rounded dark:border-gray-700 border-gray-200" data-zoom-src="/images/landing/nuxthub-admin-cache.png"} |
51 | 56 | :: |
52 | 57 | :: |
53 | 58 |
|
54 | | -The [NuxtHub admin](https://admin.hub.nuxt.com) is a web based dashboard to manage your NuxtHub apps. It helps you deploy your NuxtHub apps with a single command on your Cloudflare account while provisioning all the necessary resources for you. It abstracts the complexity of managing full-stack Nuxt applications on Cloudflare. |
55 | | - |
56 | | -### Features |
| 59 | +The [NuxtHub admin](https://admin.hub.nuxt.com) is a web based dashboard to manage your NuxtHub apps. It helps you deploy your NuxtHub apps with a single command on your Cloudflare account while provisioning all the necessary resources for you. |
57 | 60 |
|
| 61 | +It abstracts the complexity of managing full-stack Nuxt applications on Cloudflare: |
58 | 62 | - Link your Cloudflare account and stay in control, we never mark-up Cloudflare prices |
59 | | -- Deploy your application with `nuxthub deploy` command |
60 | | -- Relax while it provisions all the necessary resources (database, kv, blob) |
| 63 | +- [Deploy your application](/docs/getting-started/deploy) with `nuxthub deploy` command or with Cloudflare Pages CI |
| 64 | +- Relax while it provisions all the necessary resources (ai, blob, cache, database, kv) |
61 | 65 | - Manage your app's resources with an admin panel |
62 | 66 | - Visualize application, database, and cache metrics |
63 | 67 | - Give access to team members to manage the application without sharing your Cloudflare account |
64 | 68 | - Monitor your application with logs and analytics |
| 69 | + |
| 70 | +::tip{icon="i-ph-rocket-launch-duotone" to="https://admin.hub.nuxt.com"} |
| 71 | +Get started with NuxtHub Admin. |
| 72 | +:: |
| 73 | + |
| 74 | +## Nuxt DevTools |
| 75 | + |
| 76 | +NuxtHub also integrates with the [Nuxt DevTools](https://devtools.nuxt.com/) to provide a complete development experience. |
| 77 | + |
| 78 | +::tabs |
| 79 | +::div{label="Database"} |
| 80 | +{class="border rounded dark:border-gray-700 border-gray-200" data-zoom-src="/images/landing/nuxt-devtools-database.png"} |
| 81 | +:: |
| 82 | +::div{label="KV"} |
| 83 | +{class="border rounded dark:border-gray-700 border-gray-200" data-zoom-src="/images/landing/nuxt-devtools-kv.png"} |
| 84 | +:: |
| 85 | +::div{label="Blob"} |
| 86 | +{class="border rounded dark:border-gray-700 border-gray-200" data-zoom-src="/images/landing/nuxt-devtools-blob.png"} |
| 87 | +:: |
| 88 | +:: |
| 89 | + |
| 90 | +## Upcoming Packages |
| 91 | + |
| 92 | +We plan to provide a complete backend experience for Nuxt apps through various `@nuxthub` packages. |
| 93 | + |
| 94 | +- [`@nuxthub/core`](https://github.com/nuxt-hub/core): Main package to provide storage features |
| 95 | +- `@nuxthub/auth`: Add authentication for user management (soon) |
| 96 | +- `@nuxthub/email`: Send transactional emails to your users (soon) |
| 97 | +- `@nuxthub/analytics`: Understand your traffic and track events within your application and API (soon) |
| 98 | +- `@nuxthub/...`: You name it! |
| 99 | + |
| 100 | +::important |
| 101 | +We are currently in the early stages of development (beta) and are looking for feedback from the community. If you are interested in contributing, please join us on [nuxt-hub/core](https://github.com/nuxt-hub/core). |
| 102 | +:: |
![autofix-ci[bot]](https://avatars.githubusercontent.com/in/243519?v=4&size=40){kind=avatar}
0 commit comments