nuxt-hub / core Goto Github PK
View Code? Open in Web Editor NEWBuild full-stack applications with Nuxt on CloudFlare, with zero configuration.
Home Page: https://hub.nuxt.com
License: Apache License 2.0
Build full-stack applications with Nuxt on CloudFlare, with zero configuration.
Home Page: https://hub.nuxt.com
License: Apache License 2.0
Try creating a unique index using the Nuxt Devtools Hub Database SQL Runner.
E.g. the below query doesn't give any error, but doesn't create the index as well.
CREATE UNIQUE INDEX users_email_key ON users(email);
Is there some way to run the wrangler
commands to run D1 queries
in the terminal in a NuxtHub project? To be specific, can I execute the below command for interacting with the local DB?
bunx wrangler d1 execute <db_name> --local --file=./schema.sql
If yes, then what should be the DB name? I tried default
and ran the command from the root folder and got the below error:
✘ [ERROR] Couldn't find a D1 DB with the name or binding 'default' in wrangler.toml.
And running the command from .data/hub
(with modified file path) folder creates a new local database (not visible to Nuxt Devtools).
To avoid http check for same user token connected on same CDN node
I've added @nuxhub/core
to my existing project and tried to publish it on cloudflare as described in the docs
The build is successful but when deploying it fails:
Error: Failed to publish your Function. Got error: Uncaught TypeError: Object prototype may only be an Object or null: undefined at chunks/routes/api/_hub/index.mjs:1:149243 in hn.exports at chunks/routes/api/_hub/index.mjs:1:173254
I have no clue as to what this means. I get no further information at all.
The error happens in chunks/routes/api/_hub/index.mjs
so I assumed the problems is with @nuxthub/core
.
The starter template does work so now I'm a bit lost.
package.json
If I remember correctly, Nuxt automatically bundles dependencies even if they are dev dependencies.
I tried with putting them in dependencies
but I still get the same error.
Also, posthog-node
is supposed to work in serverless environments according to their docs.
{
...
"devDependencies": {
"@antfu/eslint-config": "^2.8.0",
"@axiomhq/pino": "1.0.0-rc.2",
"@formkit/tempo": "^0.0.15",
"@iconify/json": "^2.2.190",
"@nuxt/ui-pro": "^1.0.2",
"@nuxthub/core": "^0.2.1",
"@vueuse/core": "^10.9.0",
"dotenv": "^16.4.5",
"drizzle-kit": "^0.20.14",
"drizzle-orm": "^0.29.5",
"eslint": "^8.57.0",
"nuxt": "^3.10.3",
"nuxt-auth-utils": "^0.0.20",
"pino": "^8.19.0",
"posthog-js": "^1.111.3",
"posthog-node": "^3.6.3",
"valibot": "^0.30.0",
"vue": "^3.4.21",
"vue-router": "^4.3.0",
"wrangler": "^3.31.0"
}
}
Nuxt info
------------------------------
- Operating System: Darwin
- Node Version: v20.8.1
- Nuxt Version: 3.10.3
- CLI Version: 3.10.1
- Nitro Version: 2.9.1
- Package Manager: [email protected]
- Builder: -
- User Config: devtools, extends, modules, imports, nitro, runtimeConfig, ui, routeRules
- Runtime Modules: @nuxt/[email protected], [email protected]
- Build Modules: -
------------------------------
Is your feature request related to a problem? Please describe.
The current directory for local wrangler storage (D1, KV, R2) is .data/hub
. I have separate cloudflare worker that shares the same DB as my nuxthub project, though wrangler's default location is .wrangler/state/v3
. So I can't share storage options locally.
Describe the solution you'd like
A config to change the directory nuxthub uses for local storage
Describe alternatives you've considered
I tried using wrangler's --persist-to=./.data/hub
, but that ends up using local DB at .data/hub/v3
.
I tried using a symlink from .wrangler/state/v3
to .data/hub
, though wrangler fails as it strictly expects a directory, not a link.
Additional context
Discord discussion
As default value is an empty string
When creating an SQLite table that has a column that defaults to CURRENT_TIMESTAMP
function, the Hub Database integration in Nuxt Devtools does not run the function and insert the current timestamp. Instead it inserts (CURRENT_TIMESTAMP)
as the column value.
CREATE TABLE IF NOT EXISTS messages (
id INTEGER PRIMARY KEY,
text TEXT,
created_at datetime default CURRENT_TIMESTAMP
)
Describe the bug
If you create a seed nitro task as explained in this PR, if you run the task from the dev tools and right after you click the 'Database' view, you won't view the changes until you refresh the page.
Steps to reproduce
Steps to reproduce the behavior:
Expected behavior
Database should be reactive to updates
Would it be possible to remove or replace this example from the screenshot?
feel free to close if off topic
At Nuxt & NuxtHub, we deeply care about community feedback and transparency.
This is why we decided to leverage GitHub issues (using the volta.net board & embed features) to let you suggest ideas, templates or report bugs.
When you create an issue, it will have the "Triage" status (hidden in the board), our team will take a look at the issue and either close it with an answer or move it to "Backlog" so the whole community can participate / upvote (with 👍 reaction).
Issues moved to "Done" are meant to be released in the coming days and announced on https://hub.nuxt.com/changelog.
Thank you for reading and happy Nuxting 🚀
implemented in a project and it seems to work well 😁
Changelog page similar to what we have on Nuxt Studio.
Need to create a reproduction for Nitro to find the root cause.
If we have at least 2 images and we display them in the UI, making two serverBlob(event, pathname)
, the Nuxt/Nitro server hangs forever.
As a workaround, you can deploy your project and use the remote storage by running npx nuxi dev --remote
Upstream issue: cloudflare/workers-sdk#5360
Just having @nuxt/content
in nuxt.config.ts
modules gives the following build error:
ℹ Initializing prerenderer nitro 11:50:13 PM
ℹ Prerendering 1 routes nitro 11:50:16 PM
├─ /api/_content/cache.1712341203899.json (13ms) nitro 11:50:16 PM
│ └── Error: [500]
nitro 11:50:16 PM
Errors prerendering:
├─ /api/_content/cache.1712341203899.json (13ms) nitro 11:50:16 PM
│ └── Error: [500]
nitro 11:50:16 PM
ERROR Exiting due to prerender errors. 11:50:16 PM
at prerender (node_modules/nitropack/dist/chunks/prerender.mjs:218:11)
at async node_modules/nuxt/dist/index.mjs:3471:7
at async build (node_modules/nuxt/dist/index.mjs:5001:5)
at async Object.run (node_modules/nuxi/dist/chunks/build.mjs:95:5)
at async runCommand$1 (node_modules/nuxi/dist/shared/nuxi.9edf0930.mjs:1648:16)
at async runCommand$1 (node_modules/nuxi/dist/shared/nuxi.9edf0930.mjs:1639:11)
at async runMain$1 (node_modules/nuxi/dist/shared/nuxi.9edf0930.mjs:1777:7)
ERROR Exiting due to prerender errors. 11:50:16 PM
error: script "build" exited with code 1
nitropack gives the following error:
{"url":"/api/_content/cache.1712340211114.json","statusCode":500,"statusMessage":"","message":"Missing Cloudflare KV binding (KV)"}
Reproduction:
Just use the starter template and add @nuxt/content
package and include it in the nuxt config file. The same can be checked here: https://github.com/ra-jeev/test-nuxt-hub-app
Once we moved to the module #37
We can add option to enable features on-demand:
export default defineNuxtConfig({
modules: ['@nuxthub/core'],
hub: {
database: true, // inject hubDatabase()
}
})
I use drizzle, i tried to use drizzle studio but can't make it work.
We should document how to use Prisma with NuxtHub in the recipes now they support D1:
https://developers.cloudflare.com/d1/tutorials/d1-and-prisma-orm
With a title, description and link to the documentation.
I started wondering what the significant differences are between using @nuxthub/core
and native functions from unjs/nitro
and packages from the unjs
ecosystem and from pi0
.
I recently looked at the documentation https://nitro.unjs.io/ and https://github.com/pi0/nitro-cloudflare-dev and it seems that it is possible to handle almost everything without nuxthub
easily (at least for me).
At this point I started to see @nuxthub/core
as a wrapper that connects everything and has convenient composables.
Of course, there is also admin.hub.nuxt.com which cannot be handled in any other way and requires a hub
. Apart from that I don't see any significant differences. At the moment, I don't really see a need to use it and the idea of sharing customer data with an external platform doesn't appeal to me.
I have used @nuxthub
a bit and it is great, but I am currently testing implementations with just nitro
without using a hub and experimenting to see if working without proxies and wrappers and an individual approach to each composable will be better for me when implementing my systems.
I will be grateful @atinux for even a loose comparison of the capabilities of the hub and nitro/unjs itself and referring to what I wrote.
List the templates similar to how we list them on https://admin.hub.nuxt.com
I guess the "Use this template" can directly go on the GitHub url instead.
When open api experimental config is disable, we just link to a placeholder.
If enabled, we link to #internal/nitro/routes/openapi
We should test this on nitropack-nightly
.
Is your feature request related to a problem? Please describe.
Currently all blobs are shown in a single list while on Cloudflare there are folders.
Describe the solution you'd like
A folder like structure for blob data just like the cloudflare dashboard. (maybe just like the KV Cache admin)
should redirect to: https://hub.nuxt.com/docs/getting-started
As a heavy Cloudflare user that is returning back to Nuxt after using other meta-frameworks, I am very excited about this project.
The greatest struggle I face when working with Cloudflare is that meta frameworks tend to provide no support/tooling/abstractions for DurableObjects and I have to set up an entirely new project with wrangler
.
Would be an absolute game changer to be able to have my DurableObject definitions living inside my Nuxt project.
I have been eagerly awaiting the modularization of @nuxthub/core
and am very excited about the v0.4.0 release.
I think the nuxi module add
command will make it easier to install and add modules to nuxt.config.
So I would like to have a section for the Nuxi command to the docs.
Add a Use Nuxi(Nuxt CLI)
section along with the Add to a Nuxt project
section.
Users unfamiliar with Nuxi are more likely to refer to the Add to a Nuxt project
section, while users familiar with Nuxi are more likely to use Nuxi.
Considering that many non Nuxt native users will use (or start using) Nuxt in the future, I think it is acceptable to describe both in the current version.
As another repository trend, @danielroe has created a PR recommending the use of Nuxi
in the Storybook module, Nuxt UI.
Therefore, I see no problem with removing the Add to a Nuxt project
section for the sake of uniformity.
The change from the commit: #ccdfb21 completely prevented me from using the project.
I have a project that for some reasons must use cloudflare-module
as a preset and I am in the process of migrating the functionality and infrastructure to cloudflare-pages
one by one.
In v0.5.15
which enforces the cloudflare-pages
preset, I cannot make any changes and deploy to cloudflare-module
because this preset is overwritten with a different value.
I will note here that cloudflare-module
works very well in dev
and production
. The entire @nuxthub/core
works perfectly on both presets: cloudflare-pages
and cloudflare-module
.
I know because I have been using @nuxthub/core
and the cloudflare-module
preset in production for several days now and everything works.
At this moment I have pin version v0.5.14
in the project.
Hello ! 👋
In the documentation, you talked about the migration in development with 2 recipes page but there is nothing about migrations in production!
Could be great to know how an application using database must be published! Do you recommend to manually add SQL file in the Cloudflare UI or to use the Cloudflare CLI locally or in a custom CD? Thanks!
repo:nuxt-todos-edge
After I upgraded "@nuxthub/core": "^0.5.14" to "^0.5.16" the following problem occurred
I tried to downgrade to 0.5.14, the WARN is still there
[nuxt:tailwindcss 00:41:38] WARN You have provided functional plugins in tailwindcss.config in your Nuxt configuration that cannot be serialized for Tailwind Config. Please use tailwind.config or a separate file (specifying in tailwindcss.configPath) to enable it with additional support for IntelliSense and HMR.
On the servers-side:
// api/upload.post.ts
export default eventHandler(event => {
// Do auth checks...
return hubBlob().handleUpload(event, {
formKey: 'file', // default
multiple: true | false, // throw error if multiple files & false, default true
// ... put() options
// ensureBlob() options
})
})
We should add a prefix
option to put()
to we can also have it in handleUpload(event)
On the app side:
<script setup>
async function upload(e: Event) {
const { pathname } = await useUpload('/api/upload')(e.target.image)
}
</script>
<template>
<div>
<h3>Images</h3>
<form @submit.prevent="upload">
<label>Upload an image: <input type="file" name="image"></label>
<button type="submit">
Upload
</button>
</form>
</template>
We need to think how we can extract the admin storage logic into standalone components that can be used both in the devtools and the admin.
Thank you for the amazing module 👍 , really looking forward to using nuxthub console in production for my project.
I have an issue in my Nuxt app based on @nuxt/content
module. The production build is broken when I add @nuxthub/core
module.
I found it's caused by contents/index.yaml
. Everything is fine if I remove this file and use .md
based content.
Repository with reproduction: https://github.com/jankaderabek/content-bug
To reproduce:
npm run build
npm run preview
The documentation states that the default behaviour is false
but it still adds a random suffix...
In the source the default behaviour is defined as true
so at least the documentation can be updated to reflect that.
But after I tried explicitly defining the blob options with { addRandomSuffix: false }
, it still adds a suffix...
Am I missing something?
This is my event handler:
import destr from 'destr';
export default defineEventHandler(async (event) => {
const shopId = parseIdParam(event);
const form = await readFormData(event);
const file = form.get('file') as File;
const metaData = destr<Record<string, string>>(form.get('metaData'), {});
consola.debug('File:', file);
consola.debug('Meta data:', metaData);
if (!file || !file.size)
throw createError({ statusCode: 400, message: 'No file provided' });
ensureBlob(file, { maxSize: '1MB', types: ['image/jpeg'] });
return hubBlob().put(`images/shop/${shopId}.jpg`, file, { addRandomSuffix: false });
});
shopId
is a nano id (urxyfivpe2mg
) but when I look in cloudflare I see the following urxyfivpe2mg-27828ff2.jpg
Also, would be cool if the blob admin could have folders like they have on the cloudflare dashboard.
Is your feature request related to a problem? Please describe.
When deploying, you have keep looking at the deployment's tab until it's finished to know the status.
Describe the solution you'd like
Just like other providers, it would be nice to have some sort of notifications about deployments, specially failed ones. Maybe e-mail notifications for now.
Describe alternatives you've considered
Discord or Slack integrations would be really nice to have too.
When upgrading to the latest version, I'm getting this error after following the docs for drizzle
Describe the bug
If you delete a project on CF, you can't handle it anymore inside the hub dashboard.
Steps to reproduce
Steps to reproduce the behavior:
Expected behavior
Deleted projects on CF can be deleted from nuxt hub as well (ideally from the dashboard overview)
Describe the bug
I follow the steps to add Drizzle ORM. After that, when running db:generate
I get an deprecation error:
maxi@maxi:~/my-project$ nr db:generate
✔ script to run › db:generate
> nuxt-app@ db:generate /home/maxi/my-project
> drizzle-kit generate:sqlite
Err: This command is deprecated, please use updated 'generate' command (see https://orm.drizzle.team/kit-docs/upgrade-21#how-to-migrate-to-0210)
Steps to reproduce
Steps to reproduce the behavior:
db:generate
Expected behavior
No errors/warning should show after running the command
Similar to UI Pro design, will write the first blog post
ERROR To execute a transaction, please use the state.storage.transaction() API instead of the SQL BEGIN TRANSACTION or SAVEPOINT statements. The JavaScript API is safer because it will automatically roll back on exceptions, and because it interacts correctly with Durable Objects' automatic atomic write coalescing.
ERROR Database migrations failed D1_ERROR: not authorized
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at SQLiteD1Session.transaction (node_modules/src/d1/session.ts:174:3)
at SQLiteAsyncDialect.migrate (node_modules/src/sqlite-core/dialect.ts:795:3)
at migrate (node_modules/src/d1/migrator.ts:10:2)
at <anonymous> (server/plugins/migrations.ts:9:1)
at async Promise.all (index 0)
at <anonymous> (/node_modules/@nuxthub/core/src/module/runtime/ready.dev.ts:5:1)
It would be great if we support the r2 multipart api.
Workers have a memory limit of 128MB per Worker so the blob can't resolve some large files. And multipart upload can imporve the experense of user who using low speed network
looks not too complex and I already have some code, I can make a pr if you want
Is your feature request related to a problem? Please describe.
By default Cloudflare Page's builds are triggered on each commit/PR to the configured production branch. This means that the Deployments
page on Nuxt Hub will show a list >=
commits/PRs to that branch.
Although the majority of times we could be interested only in the latest builds, it could be useful to be able to filter based on a particular deployment status, for long term debugging (Checking only canceled
or idle
or failure
).
Describe the solution you'd like
The addition of a SelectMenu to be able to pick what statuses to show or not, will all statuses selected by default (since @atinux has already pointed out that this is would be only client side).
Additional context
This idea came to mind when setting up a test project, that I know I will handle it mostly in a single branch, with a good number of commits just to test features here and there, that wouldn't require a build. To do so I've disabled the automatic builds from the Cloudflare Page Settings for that particular project, and configured a Github action that will trigger a Cloudflare Deploy Hook whenever I decide to.
But now there will be a lot of idle
builds, since Cloudflare will detect those commits, but not fire a build.
Describe alternatives you've considered
Change the idle
badge color to gray to match the canceled
one, or more simply make it different from the failure
color (since, to my understanding, a deployment is tagged as idle
when ready but not fired
).
Based on the current branch, we should be able to use the correct environment (production or preview) when using the remote
option with NUXT_HUB_PROJECT_KEY
.
We could also support the --remote=production
and --remote=preview
to force the connection of a specific env.
I already have a manually deployed NuxtHub project which has its D1 in the APAC
region. Now I got access to NuxtHub Admin where while importing the said project I didn't change the storage location in the panel (default was Western Europe
).
Now here are some questions I've:
Overall the admin panel looks great. Thank you for the access :-).
Noticed a typo 👇 in Settings -> Domains
, can is repeated twice (not creating a separate issue for this).
While reading NuxtHub's docs I see a comment about only run migrations in development
:
core/docs/content/docs/3.recipes/1.hooks.md
Lines 17 to 30 in b36246d
But wouldn't this use the Cloudflare's quota? (I imagine only while in remote)
Moreover, while reading Cloudflare's docs about D1 migrations I also see that they are supported via .sql
files. How complex could it be to implement a local migration
folder (alongside all Nuxt's folders) that is cloned to Worker's directory and handle migrations this way?
First time checking out both NuxtHub and Cloudflare 😜
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.