Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: set baseUrl via runtimeConfig #1920

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/content/3.options/2.routing.md
Expand Up @@ -13,6 +13,8 @@ The fallback base URL to use as a prefix for alternate URLs in `hreflang` tags.

Can also be a function (will be passed a Nuxt Context as a parameter) that returns a string. Useful to make base URL dynamic based on request headers.

This property can also be set using [`runtimeConfig`](./runtime-config).

::alert{type="info"}

It's especially important to set this option when using SEO features, in which case it's required that generated SEO tags use fully-qualified URLs.
Expand Down
47 changes: 47 additions & 0 deletions docs/content/3.options/7.runtime-config.md
@@ -0,0 +1,47 @@
# Runtime config

Some options can be set via the `runtimeConfig`, setting options this way makes it possible to override these after building using environment variables.

---

## Usage

If you want to use environment variables to change [supported options](#supported-options), you will have to set these in `runtimeConfig.public.i18n`.

The module configuration takes precedence, options set through `runtimeConfig` will only be used if they are unset.

Setting `baseUrl` through `runtimeConfig` would look like this:

```ts {}[nuxt.config.ts]
export default defineNuxtConfig({
runtimeConfig: {
public: {
i18n: {
baseUrl: 'https://example.com',
}
}
},
modules: [
'@nuxtjs/i18n'
],
i18n: {
// Leave options unset that you want to set using `runtimeConfig`
// baseUrl: 'https://example.com',
}
})
```

With this configuration you will be able to override the `baseUrl` option by setting the `NUXT_PUBLIC_I18N_BASE_URL` environment variable. You can read more about how this works in the [Nuxt documentation](https://nuxt.com/docs/guide/going-further/runtime-config#environment-variables).

## Supported options

These options can be set using `runtimeConfig`:
* [`baseUrl`](./routing#baseUrl)

::alert{type=warning}
Only [serializable values are supported](https://nuxt.com/docs/guide/going-further/runtime-config#serialization) in `runtimeConfig`, options set this way may not support all available types (such as functions) as would normally be possible using the default configuration.
::

::alert{type=info}
If you would like other options to be supported, open an issue describing your use case, or open a PR adding to add support yourself!
::
35 changes: 35 additions & 0 deletions specs/seo/baseUrl_runtimeConfig.spec.ts
@@ -0,0 +1,35 @@
import { expect, test } from 'vitest'
import { fileURLToPath } from 'node:url'
import { setup, $fetch } from '@nuxt/test-utils'
import { getDom, getDataFromDom, assertLocaleHeadWithDom } from '../helper'

const configDomain = 'https://runtime-config-domain.com'
await setup({
rootDir: fileURLToPath(new URL(`../fixtures/basic`, import.meta.url)),
browser: true,
// overrides
nuxtConfig: {
runtimeConfig: {
public: {
i18n: {
baseUrl: configDomain
}
}
},
i18n: {
// debug: true,
defaultLocale: 'en',
baseUrl: ''
}
}
})

test('render seo tags with baseUrl', async () => {
const html = await $fetch('/?noncanonical')
const dom = getDom(html)
await assertLocaleHeadWithDom(dom, '#home-use-locale-head')

const links = getDataFromDom(dom, '#home-use-locale-head').link
const i18nCan = links.find(x => x.id === 'i18n-can')
expect(i18nCan.href).toContain(configDomain)
})
11 changes: 10 additions & 1 deletion src/runtime/utils.ts
Expand Up @@ -485,18 +485,27 @@ export function extendBaseUrl<Context extends NuxtApp = NuxtApp>(
): BaseUrlResolveHandler<Context> {
return (context: Context): string => {
if (isFunction(baseUrl)) {
return baseUrl(context)
const baseUrlResult = baseUrl(context)
__DEBUG__ && console.log('baseUrl: using localeLoader function -', baseUrlResult)
return baseUrlResult
}

const { differentDomains, localeCodeLoader, normalizedLocales } = options
const localeCode = isFunction(localeCodeLoader) ? localeCodeLoader() : localeCodeLoader
if (differentDomains && localeCode) {
const domain = getDomainFromLocale(localeCode, normalizedLocales, options.nuxt)
if (domain) {
__DEBUG__ && console.log('baseUrl: using differentDomains -', domain)
return domain
}
}

const config = context.$config?.public?.i18n
if (config?.baseUrl) {
__DEBUG__ && console.log('baseUrl: using runtimeConfig -', config.baseUrl)
return config.baseUrl
}

return baseUrl
}
}
Expand Down