nuxt-hub / core Goto Github PK

I use drizzle, i tried to use drizzle studio but can't make it work.

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:

1. Go to CF pages and remove an existing nuxt hub project
2. Go to nuxt hub dashboard an try to interact with this project
3. You see an error toast, but the project remains inside the dashboard and can't be deleted from

Expected behavior
Deleted projects on CF can be deleted from nuxt hub as well (ideally from the dashboard overview)

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 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.

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

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

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:

1. What happens when I redeploy the project? Will it shift the D1 location (if yes, then what happens to the existing data) or no change?
2. I can't see my D1 etc data in the admin panel. It says that I need to enable the configs in my nuxt config even though that is already present. Is there some misconfiguration on my part, or a redeploy will fix this?
3. I see that nuxthub admin wants to add some new environment variables to the deployed app, is that related to the point 2 above or altogether a different thing?

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).

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).

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

From https://blog.cloudflare.com/workers-production-safety

📚 Description

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.

🖐️ Design

Add a Use Nuxi(Nuxt CLI) section along with the Add to a Nuxt project section.

Reason

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.

• Storybook module
• Nuxt UI

To avoid http check for same user token connected on same CDN node

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

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
)

should redirect to: https://hub.nuxt.com/docs/getting-started

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.

Similar to UI Pro design, will write the first blog post

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

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.

• https://github.com/nuxt-hub/core/blob/main/docs/public/nuxthub-admin.png

Would it be possible to remove or replace this example from the screenshot?
feel free to close if off topic

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.

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 🚀

In addition to cloudflare support for different providers like:

• Vercel
• Netlify
• Lagoss

would be great.

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.

Safari

Visual Error:

Text error:

[Error] Not allowed to request resource
[Error] Fetch API cannot load http://localhost:3000/api/_hub/database/query due to access control checks.

Nuxt DevTools errors:

Chrome

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.

Reproduction

Repository with reproduction: https://github.com/jankaderabek/content-bug

To reproduce:

• run npm run build
• run npm run preview
• open the page in the browser and you can see 500

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)

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>

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).

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.
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.

Changelog page similar to what we have on Nuxt Studio.

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.

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:

1. In a new project, follow the steps shown in the documentation
2. Once you have all the database config, run db:generate
3. You should see the deprecation error

Expected behavior
No errors/warning should show after running the command

See https://nitro.unjs.io/guide/database#configuration

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.

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()
  }
})

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.

With a title, description and link to the documentation.

implemented in a project and it seems to work well 😁

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:

1. Create your Nitro Task for populating the database
2. Run the task from the Dev Tools
3. Change the view to the database. Table will be empty
4. If you click Refresh in the browser you will see the data

Expected behavior

Database should be reactive to updates

While reading NuxtHub's docs I see a comment about only run migrations in development:

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 😜

As default value is an empty string

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!

When upgrading to the latest version, I'm getting this error after following the docs for drizzle