Use <server> tags in your Nuxt pages components
MIT License
๐งช 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
:
server/.generated/api/message.get.ts
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.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.
Feedback, issues and PRs are welcomed.