feat(module): support server-specific runtime configuration

docs/pages/4.advanced.md

@@ -3,6 +3,31 @@ title: Advanced
 description: 'Real-life advanced usages of the strapi module.'
 ---
 
+## Server-Specific Configuration
+
+You can apply configuration based on whether a request is processed on the browser or server by using Nuxt [runtimeConfig](https://v3.nuxtjs.org/guide/features/runtime-config). Options provided directly over `runtimeConfig` field will override options provided in the `strapi` field of Nuxt configuration.
+
+```ts
+export default defineNuxtConfig({
+  // ...
+  runtimeConfig: {
+    strapi: { // nuxt/strapi options available server-side
+      url: 'http://example-strapi-instance:1337'
+    },
+    public: {
+      strapi: { // nuxt/strapi options available client-side
+        url: 'https://strapi.example.com'
+      }
+    }
+  },
+  // nuxt/strapi options available on both client and server
+  strapi: {
+    prefix: '/api'
+  }
+  // ...
+})
+```
+
 ## Async data
 
 To take full advantage of server-side rendering, you can use Nuxt [useAsyncData](https://v3.nuxtjs.org/docs/usage/data-fetching#useasyncdata) composable:

example/nuxt.config.ts

@@ -5,6 +5,13 @@ export default defineNuxtConfig({
   buildModules: [
     module
   ],
+  // example of separate client/server URLs
+  /* runtimeConfig: {
+    strapi: { url: 'http://localhost:1337' },
+    public: {
+      strapi: { url: 'http://content:1337' }
+    }
+  }, */
   strapi: {
     url: 'http://localhost:1337'
   }

example/pages/index.vue

@@ -3,7 +3,9 @@
     <h1>@nuxtjs/strapi</h1>
 
     <h2>Url</h2>
-    <pre>{{ url }}</pre>
+    <client-only>
+      <pre>{{ url }}</pre>
+    </client-only>
     <h2>Version</h2>
     <pre>{{ version }}</pre>
 

src/module.ts

@@ -64,6 +64,12 @@ export default defineNuxtModule<ModuleOptions>({
       version: options.version,
       cookie: options.cookie
     })
+    nuxt.options.runtimeConfig.strapi = defu(nuxt.options.runtimeConfig.strapi, {
+      url: options.url,
+      prefix: options.prefix,
+      version: options.version,
+      cookie: options.cookie
+    })
 
     // Transpile runtime
     const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))

src/runtime/composables/useStrapiGraphQL.ts

@@ -3,7 +3,7 @@ import { useStrapiClient } from './useStrapiClient'
 
 export const useStrapiGraphQL = () => {
   const client = useStrapiClient()
-  const config = useRuntimeConfig().public
+  const config = useRuntimeConfig()
 
   return <T> (query: string): Promise<T> => {
     return client('/graphql', { method: 'POST', body: { query }, baseURL: config.strapi.url })

src/runtime/composables/useStrapiToken.ts

@@ -2,7 +2,7 @@ import { useCookie, useNuxtApp, useRuntimeConfig } from '#app'
 
 export const useStrapiToken = () => {
   const nuxtApp = useNuxtApp()
-  const config = useRuntimeConfig().public
+  const config = useRuntimeConfig()
 
   nuxtApp._cookies = nuxtApp._cookies || {}
   if (nuxtApp._cookies.strapi_jwt) {

src/runtime/composables/useStrapiUrl.ts

@@ -1,7 +1,7 @@
 import { useRuntimeConfig } from '#app'
 
 export const useStrapiUrl = (): string => {
-  const config = useRuntimeConfig().public
+  const config = useRuntimeConfig()
   const version = config.strapi.version
   return version === 'v3' ? config.strapi.url : `${config.strapi.url}${config.strapi.prefix}`
 }

src/runtime/composables/useStrapiVersion.ts

@@ -1,6 +1,6 @@
 import { useRuntimeConfig } from '#app'
 
 export const useStrapiVersion = (): string => {
-  const config = useRuntimeConfig().public
+  const config = useRuntimeConfig()
   return config.strapi.version
 }