server/apiの使い方

「server/api」ディレクトリ以下のファイルでは、サーバーサイドからリクエストが行えるAPIを作成できます。

server/api
  └── my-api.ts

server/api/my-api.ts

export default (req, res) => {
  return 'Hello World'
}

Vueファイルからの呼び出しはuseFetch、もしくはuseAsyncDataを使用します。

APIでreturnしたデータはdataオブジェクト内に格納されています。

pages/index.vue

// useAsyncData
const { data } = await useAsyncData('get-api', () => {
  return $fetch('/api/my-api')
})

// useFetch
const { data } = await useFetch('/api/my-api')

server/api以下のファイルはインポートできない

例えばShopifyの初期化ファイルを「server/api」以下に作成した場合。

server/api/shopify/client.ts

import Client from 'shopify-buy'

const client = Client.buildClient({
  domain: process.env.SHOPIFY_DOMAIN,
  storefrontAccessToken: process.env.SHOPIFY_ACCESS_TOKEN,
  language: 'ja-JP'
})

export default client

プラグインファイルからはインポートできません。

plugins/shopify.ts

// NG
import client from '~/server/api/shopify/client'

export default defineNuxtPlugin((nuxtApp) => {
  console.log(client)
})

コード自体は稼働するものの、ターミナルには下記エラーが発生します。

console

# サーバーミドルウェアからのインポートは、アプリのVue部分にはできません。
Importing from server middleware is not allowed in the Vue part of your app.

結論

初期化ファイルなどのimport前提のファイルは、Nuxt2と同じく「plugins」ディレクトリに置くと良いでしょう。