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

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

🫴 Contributing

Feedback, issues and PRs are welcomed.