Integrations
Server blocks
Use server blocks to define server block in your pages.
The server block module allows you to define server blocks in your pages.
pages/message.vue
<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>
You can combine it with form-actions and loaders !
Basic Usage
Install the module from NPM :
npm install @hebilicious/server-block-nuxt @hebilicious/sfc-server-volar
Add the module to modules in your nuxt.config:
nuxt.config.ts
export default defineNuxtConfig({
modules: ["@hebilicious/server-block-nuxt", "@hebilicious/form-actions-nuxt"] // the order is important !
})
Use straight away in your pages !
pages/cool.vue
<server lang="ts">
export const loader = defineServerLoader(async () => {
return { cool: "stuff", supercool: "more-stuffsss" }
})
</server>
<script setup lang="ts">
const { result } = await useLoader("cool")
</script>
<template>
<div>
<h1>Stuff</h1>
{{ result }}
</div>
</template>
Refer to the server block documentation for more information.