![image](https://private-user-images.githubusercontent.com/13395944/253210404-4051eefe-cd83-48cb-a08b-88c451988d10.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU0MjQ5NjksIm5iZiI6MTcyNTQyNDY2OSwicGF0aCI6Ii8xMzM5NTk0NC8yNTMyMTA0MDQtNDA1MWVlZmUtY2Q4My00OGNiLWEwOGItODhjNDUxOTg4ZDEwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA0VDA0Mzc0OVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTNiODM0YzZiZGNlODBhNzIyNzAyMzU4ZjA1N2QzYmQxMDEzZjVmOGNiMDA3ODgxMDFjNDQxZDYyM2MwYTdlYmMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ooNp8TUT6s34Mv6-sBQAL8Fj6C578McgGQyMIJ93NsY)
🧪 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 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.
-
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.
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.
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.
- Integrates with form-actions & loaders
- Add useFetch typings
- Support multiple server blocks in a single file
Feedback, issues and PRs are welcomed.