Nuxt 4 New Folder Structure Support?

[KidSysco]

Fresh install with latest version of Nuxt and Nuxt UI. Nothing else.

Installed TRPC, followed the docs from Getting Started Section of the TRPC docs.

Everything works perfectly.

Updated the the Nuxt config to use compatibilityVersion: 4.

https://nuxt.com/docs/getting-started/upgrade

Everything works perfectly.

Moved to new Nuxt 4 folder structure, /app/pages folder. TRPC breaks. It now uses the < any > type for params and return types. Will not build.

This code from the Getting Started section of the TRPC-Nuxt docs worked fine, until we moved to the new Nuxt 4 folder structure.

Any plans, thoughts, Ideas? Anyone else have similar issues?

[KidSysco]

Copying the server folder from root, to the app folder resolved this issue, but 2 copies of the server folder must be maintained.

[wobsoriano]

Thanks for reporting! I'll check this one out asap

[mschoeffmann]

Copying the server folder from root, to the app folder resolved this issue, but 2 copies of the server folder must be maintained.

I’ve been using this configuration for a few months now in multiple projects. It works flawlessly in all of them without any workarounds, such as duplicating folders.

However, I’ve noticed that it only works smoothly after deleting the node_modules and .nuxt directories and performing a fresh install and launch of the dev server. After that, I restart VSCode - only then everything worked as expected.

[gsxdsm]

Any updates here?

[GerryWilko]

I'm a big fan of TRPC and @wobsoriano's package. I have started to wonder recently though does TRPC's value proposition start to be undermined by Nuxt adding more first class support for schema parsing of body/query/params. https://unjs.io/blog/2023-08-15-h3-towards-the-edge-of-the-web#runtime-type-safe-request-utils

I like things like context and procedure types for auth checking in TRPC but this is covered by Nuxt middleware. I wonder if the Nuxt v4 answer is that perhaps TRPC is no longer provides much over Nuxt's built in utilities.

Typed requests, zod checking of body/query and middleware cover almost everything I personally use.

Hoping to provoke some discussion here if I'm missing something?

[KidSysco]

I'm a big fan of TRPC and @wobsoriano's package. I have started to wonder recently though does TRPC's value proposition start to be undermined by Nuxt adding more first class support for schema parsing of body/query/params. https://unjs.io/blog/2023-08-15-h3-towards-the-edge-of-the-web#runtime-type-safe-request-utils

I like things like context and procedure types for auth checking in TRPC but this is covered by Nuxt middleware. I wonder if the Nuxt v4 answer is that perhaps TRPC is no longer provides much over Nuxt's built in utilities.

Typed requests, zod checking of body/query and middleware cover almost everything I personally use.

Hoping to provoke some discussion here if I'm missing something?

I have not seen this until now, interesting points you bring up.

I wonder which is faster?

The trpc client is really nice, I think you might be leaving that out. But if your primary focus is just typed requests then TRPC has always probably been too much. TRPC still puts a little more value on end-to-end type safety in a really neat RPC-like fashion.

[GerryWilko]

@KidSysco I'm not too sure on performance but I would think Nuxt's mechanisms is more bare-bones as trpc-nuxt sits on top of the existing middleware system and other bits of tRPC overlap with built in functionality in Nuxt.

RPC-like is a choice right, its something that you can quite easily achieve by the way you structure your endpoints. Nuxt's server apis don't have to be REST.

I would argue that on a pure feature to feature comparison Nuxt's built in server offerings offer exactly the same end-to-end type safety.

Out of interest what features of the trpc client do you leverage that goes beyond what you can just do with a simple useAsyncData call to a Nuxt api endpoint?

[mschoeffmann]

Out of interest what features of the trpc client do you leverage that goes beyond what you can just do with a simple useAsyncData call to a Nuxt api endpoint?

Easy integration of subscriptions via WS or SSE

[KidSysco]

When using $trpc, and I start to type input params for the API call, it auto completes with type safety. This takes some clever setup to do on your own. Which makes the DX really nice because it is less boilerplate and less discipline to keep types safely in sync on client and server. Notice how that feature is derived from server code in Nitro, but it is actually executing on the client. That sort of automation is going to be hard to setup on your own, sure it can be done, but getting all of these features wrapped up on your own is going to be similar to re-writing TPRC, when there is already a standardized framework in place.

If your team doesn't value this level of type safety, then TRPC is probably too much. Just call the API however you can, using whatever clever code you can muster up.

If you team does value this level of type safety, then I would not re-write all of this functionality and hope I get it right. I just use TRPC.

[GerryWilko]

Sorry you are absolutely right I completely missed that request typing is not working (yet nuxt/nuxt#15261). This and a good point about subscriptions.

[FrancoCab10]

I was able to make TRPC work fine with the new folder structure in Nuxt4 by doing type augmentation directly in the plugin:

import { createTRPCNuxtClient, httpBatchLink } from 'trpc-nuxt/client'
import type { AppRouter } from '~/../server/trpc/routers'

type ApiClient = ReturnType<typeof createTRPCNuxtClient<AppRouter>>

declare module '#app' {
  interface NuxtApp {
    $trpc: ApiClient
  }
}

declare module 'vue' {
  interface ComponentCustomProperties {
    $trpc: ApiClient
  }
}

export default defineNuxtPlugin(() => {
  const trpc = createTRPCNuxtClient<AppRouter>({
    links: [httpBatchLink({ url: '/api/trpc' })],
  })

  return {
    provide: {
      trpc,
    },
  }
})

[IlyaSemenov]

I like things like context and procedure types for auth checking in TRPC but this is covered by Nuxt middleware. I wonder if the Nuxt v4 answer is that perhaps TRPC is no longer provides much over Nuxt's built in utilities.

The major points why trpc-nuxt is still relevant are:

• Hierarchy of procedures (Nuxt middlewares are not even close). Simply having authProcedure which automatically rejects non-authenticated requests to the derived queries and updates the type of ctx.userId to non-null is not possible with Nuxt middlewares, or is it?
• Subscriptions (although these are half-backed with trpc-nuxt).
• Using non-Nuxt backend (e.g. a tRPC server in a different monorepo package).

For very simple backends yes, tRPC is an overkill. But then, getValidatedQuery / readValidatedBody have been the case for years, they have nothing to do with specifically Nuxt v4.

[wobsoriano]

hey guys, Im back from my paternal leave 😆

Hope I can add support to v4 soon! #235