Server Block Nuxt

🚀 Welcome to Server Block Nuxt!

🧪 This module is experimental 🧪

Nuxt Module that adds server block supports in your pages components.

<server lang="ts"></server><script lang="ts" setup></script><template></template><style></style>

You can think of server block as a convenient way to write API handlers in your pages components.

📦 Install

Install the module and the volar extension :

npm i -D @hebilicious/server-block-nuxt @hebilicious/sfc-server-volar

Add the module to your Nuxt config :

export default defineNuxtConfig({  modules: [    "@hebilicious/server-block-nuxt"  ]})

That's it ! The volar extension will be automatically installed by the nuxt module.

📖 Usage

Server blocks are only available in pages components.
default exports are not available in server blocks. Use named exports.

Add a server block in a page component :

<server lang="ts">const message = "Hello World!!!"const bye = "bye!"export const GET = defineEventHandler(() =>({ message }))export const POST = defineEventHandler(() =>({ message: bye }))</server><script setup lang="ts">const { data } = useFetch("/api/message")</script><template>  <div> Hello Message, {{ data }} </div></template>

This will generate 2 handlers in server/.generated/api :

GET : server/.generated/api/message.get.ts
POST : server/.generated/api/message.post.ts

All HTTP methods are supported.

Custom route

You can override the default route convention with the path attribute :

<server lang="ts" path="/not-api/this/is/cool">export const GET = defineEventHandler((event) => {  return "We're here now."})</server><script setup lang="ts">const { data } = useFetch("/not-api/this/is/cool")</script><template>  <h1>Hello</h1>  <div> {{ data }} </div></template>

A server/.generated/not-api/this/is/cool.get.ts get handler will be generated.

💡 FAQ

Why <server> and not <script server> ?

<script server> causes issues with the current behaviour of additional script tags in SFCs (notably with import/exports)
<server> blocks are completely removed from the SFC and don't interfere with <template> or <script>, they create a clear boundary.
The syntax highlighting work in environments that uses the lang attribute. I would like github support too.

Why no defineServerProps or loaders ?

You can combine this with another library such as https://github.com/Hebilicious/form-actions-nuxt if you want to use form actions and loaders.

Should I commit the generated files to my repository? No. A .gitignore file will be generated for you.

📝 TODO

Integrates with form-actions & loaders
Add useFetch typings
Support multiple server blocks in a single file

🫴 Contributing

Feedback, issues and PRs are welcomed.