importする自作プラグインはserver/apiには置けない
  • 2022.03.18に公開
  • Nuxt3
  • 0. Nuxt3
  • No.7 / 9
現在このカテゴリーは、Nuxt3パブリックベータ版の情報を公開しています。変更の可能性が大きくあるので、最新の情報は Nuxt3の公式サイト をご確認ください。

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ディレクトリに置くと良いでしょう。

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
独学プログラマ
独学でも、ここまでできるってよ。
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。