Server Block Nuxt

🚀 Server Block Nuxtへようこそ！

🧪 このモジュールは実験段階です 🧪

ページコンポーネントにサーバーブロックサポートを追加するNuxtモジュールです。

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

サーバーブロックは、ページコンポーネント内でAPIハンドラーを記述するための便利な方法と考えてください。

📦 インストール

モジュールとVolar拡張機能をインストールします

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

Nuxtの設定にモジュールを追加します

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

以上です！Volar拡張機能はNuxtモジュールによって自動的にインストールされます。

📖 使い方

• サーバーブロックはページコンポーネントでのみ使用できます。
• サーバーブロックではデフォルトエクスポートは使用できません。名前付きエクスポートを使用してください。

ページコンポーネントにサーバーブロックを追加します

<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>

これにより、server/.generated/apiに2つのハンドラーが生成されます

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

すべてのHTTPメソッドがサポートされています。

カスタムルート

path属性を使用して、デフォルトのルート規則をオーバーライドできます

<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>

server/.generated/not-api/this/is/cool.get.tsというGETハンドラーが生成されます。

💡 FAQ

なぜ<server>ではなく<script server>なのですか？

• <script server>は、SFCにおける追加のスクリプトタグの現在の動作（特にimport/export）に問題を引き起こします。
• <server>ブロックはSFCから完全に削除され、<template>または<script>と干渉しません。明確な境界を形成します。
• 構文ハイライトは、lang属性を使用する環境で動作します。GitHubのサポートも望みます。

なぜdefineServerPropsやローダーがないのですか？

フォームアクションやローダーを使用したい場合は、https://github.com/Hebilicious/form-actions-nuxtなどの別のライブラリと組み合わせることができます。

生成されたファイルをリポジトリにコミットする必要がありますか？ いいえ。.gitignoreファイルが自動的に生成されます。

📝 TODO

• form-actionsとローダーとの統合
• useFetchの型定義の追加
• 単一ファイルでの複数のサーバーブロックのサポート

🫴 コントリビューション

フィードバック、問題、プルリクエストは大歓迎です。