Skip to content

Commit

Permalink
specify types definition in Nuxt guide
Browse files Browse the repository at this point in the history
  • Loading branch information
dario-piotrowicz committed Feb 22, 2024
1 parent e8c1e3e commit 718fa29
Showing 1 changed file with 38 additions and 4 deletions.
42 changes: 38 additions & 4 deletions content/pages/framework-guides/deploy-a-nuxt-site.md
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,41 @@ This module is powered by the `getPlatformProxy` [helper function](/workers/wran

In order to access bindings in a deployed application, you will need to [configure your bindings](/pages/functions/bindings/) in the Cloudflare dashboard.


### Add bindings to Typescript projects

{{<Aside type="note">}}

Projects created with C3 have a default `env.d.ts` file.

{{</Aside>}}

To get proper type support, you need to create a new `env.d.ts` file in your project and declare a [binding](/pages/functions/bindings/).

The following is an example of adding a `KVNamespace` binding:

```ts
---
filename: env.d.ts
highlight: [10]
---
import { CfProperties, Request, ExecutionContext, KVNamespace } from '@cloudflare/workers-types';

declare module 'h3' {
interface H3EventContext {
waitUntil: ExecutionContext['waitUntil']
cf: CfProperties,
cloudflare: {
request: Request,
env: {
MY_KV: KVNamespace,
}
context: ExecutionContext,
};
}
}
```

### Access bindings in your Nuxt application

In Nuxt, add server-side code via [Server Routes and Middleware](https://nuxt.com/docs/guide/directory-structure/server#server-directory). The `defineEventHandler()` method is used to define your API endpoints in which you can access Cloudflare's context via the provided `context` field. The `context` field allows you to access any bindings set for your application.
Expand All @@ -112,12 +147,11 @@ The following code block shows an example of accessing a KV namespace in Nuxt.

```typescript
---
filename: src/my-endpoint.get.ts
highlight: [2, 3]
filename: server/api/hello.ts / server/api/hello.js
highlight: [2]
---
export default defineEventHandler(({ context }) => {
// the type `KVNamespace` comes from the @cloudflare/workers-types package
const MY_KV: KVNamespace = context.cloudflare.env.MY_KV;
const MY_KV = context.cloudflare.env.MY_KV;

return {
// ...
Expand Down

0 comments on commit 718fa29

Please sign in to comment.