Merge pull request #13 from microcmsio/support-nuxt-3-5-0

環境変数がクライアントサイドで読み込まれない問題を修正

Author: dc7290

.tool-versions

@@ -0,0 +1 @@
+nodejs 18.16.0

package.json

@@ -41,18 +41,18 @@
     "prepublishOnly": "nuxi prepare playground && yarn lint && nuxt-module-build"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.2.0",
+    "@nuxt/kit": "^3.5.3",
     "defu": "^6.1.2",
-    "microcms-js-sdk": "^2.3.2"
+    "microcms-js-sdk": "^2.5.0"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.1.1",
-    "@nuxt/module-builder": "^0.2.1",
-    "@nuxt/schema": "^3.2.3",
-    "@nuxt/test-utils": "^3.2.3",
-    "@types/node": "16.18.13",
-    "eslint": "^8.35.0",
-    "eslint-config-prettier": "^8.6.0",
-    "nuxt": "^3.2.3"
+    "@nuxt/module-builder": "^0.4.0",
+    "@nuxt/schema": "^3.5.3",
+    "@nuxt/test-utils": "^3.5.3",
+    "@types/node": "^18.11.9",
+    "eslint": "^8.42.0",
+    "eslint-config-prettier": "^8.8.0",
+    "nuxt": "^3.5.3"
   }
 }

src/module.ts

@@ -40,11 +40,12 @@ export default defineNuxtModule<ModuleOptions>({
       nuxt.options.runtimeConfig.public.microCMS.serviceDomain ||
       nuxt.options.runtimeConfig.microCMS.serviceDomain;
 
-    if (nuxt.options.dev || options.target === 'all') {
-      nuxt.options.runtimeConfig.public.microCMS = defu(
-        nuxt.options.runtimeConfig.public.microCMS,
-        nuxt.options.runtimeConfig.microCMS
-      );
+    nuxt.options.runtimeConfig.public.microCMS.apiKey =
+      nuxt.options.runtimeConfig.public.microCMS.apiKey ||
+      nuxt.options.runtimeConfig.microCMS.apiKey;
+
+    if (!nuxt.options.dev && options.target !== 'all') {
+      nuxt.options.runtimeConfig.public.microCMS.apiKey = undefined;
     }
 
     const { resolve } = createResolver(import.meta.url);
@@ -53,10 +54,3 @@ export default defineNuxtModule<ModuleOptions>({
     addImportsDir(resolve('./runtime/composables'));
   },
 });
-
-declare module '@nuxt/schema' {
-  interface RuntimeConfig {
-    serviceDomain: string;
-    apiKey: string;
-  }
-}

src/runtime/composables/useMicroCMSGet.ts

@@ -5,7 +5,7 @@ import {
   MicroCMSQueries,
 } from 'microcms-js-sdk';
 import { useFetch, useRuntimeConfig } from 'nuxt/app';
-import type { FetchOptions as _FetchOptions } from 'ofetch';
+import type { FetchError } from 'ofetch';
 import { computed } from 'vue';
 
 import { useMicroCMSUrl } from './useMicroCMSUrl';
@@ -31,13 +31,16 @@ type MicroCMSGetObjectArgs = {
   queries?: MicroCMSQueries;
 };
 
-type FetchOptions = Omit<_FetchOptions<'json'>, 'baseURL' | 'query' | 'method'>;
+type FetchOptions<T extends unknown> = Omit<
+  Parameters<typeof useFetch<T, FetchError, string, 'get'>>,
+  'baseURL' | 'query' | 'method'
+>[1];
 
 const method = 'GET';
 
 const useMicroCMSGet = <T>(
   { url, queries }: MicroCMSGetArgs,
-  fetchOptions: FetchOptions = {}
+  fetchOptions: FetchOptions<T> = {}
 ) => {
   const baseURL = useMicroCMSUrl();
   const config = useRuntimeConfig();
@@ -52,12 +55,14 @@ const useMicroCMSGet = <T>(
       : undefined
   );
 
-  return useFetch<T>(url, {
+  return useFetch<T, FetchError, string, 'get'>(url, {
     ...fetchOptions,
     baseURL,
     query,
     headers: {
-      'X-MICROCMS-API-KEY': config.microCMS?.apiKey,
+      'X-MICROCMS-API-KEY': config.microCMS
+        ? config.microCMS.apiKey
+        : config.public.microCMS.apiKey,
       ...fetchOptions.headers,
     },
     method,
@@ -66,7 +71,7 @@ const useMicroCMSGet = <T>(
 
 export const useMicroCMSGetList = <T>(
   { endpoint, queries }: MicroCMSGetListArgs,
-  fetchOptions: FetchOptions = {}
+  fetchOptions: FetchOptions<MicroCMSListResponse<T>> = {}
 ) => {
   return useMicroCMSGet<MicroCMSListResponse<T>>(
     { url: endpoint, queries },
@@ -76,7 +81,7 @@ export const useMicroCMSGetList = <T>(
 
 export const useMicroCMSGetListDetail = <T>(
   { endpoint, contentId, queries }: MicroCMSGetListDetailArgs,
-  fetchOptions: FetchOptions = {}
+  fetchOptions: FetchOptions<T & MicroCMSListContent> = {}
 ) => {
   return useMicroCMSGet<T & MicroCMSListContent>(
     { url: `${endpoint}/${contentId}`, queries },
@@ -86,7 +91,7 @@ export const useMicroCMSGetListDetail = <T>(
 
 export const useMicroCMSGetObject = <T>(
   { endpoint, queries }: MicroCMSGetObjectArgs,
-  fetchOptions: FetchOptions = {}
+  fetchOptions: FetchOptions<T & MicroCMSObjectContent> = {}
 ) => {
   return useMicroCMSGet<T & MicroCMSObjectContent>(
     { url: endpoint, queries },

src/runtime/composables/useMicroCMSUrl.ts

@@ -7,5 +7,9 @@ const VERSION = 'v1';
 export const useMicroCMSUrl: UseMicroCMSUrl = () => {
   const config = useRuntimeConfig();
 
-  return `https://${config.microCMS.serviceDomain}.microcms.io/api/${VERSION}`;
+  return `https://${
+    config.microCMS
+      ? config.microCMS.serviceDomain
+      : config.public.microCMS.serviceDomain
+  }.microcms.io/api/${VERSION}`;
 };