This repository has been archived by the owner on Apr 6, 2023. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into fix/#components-import
- Loading branch information
Showing
12 changed files
with
250 additions
and
46 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,139 @@ | ||
| # `useRuntimeConfig` | ||
|
|
||
| The `useRuntimeConfig` composable is used to expose config variables within your app. | ||
|
|
||
| ## Usage | ||
|
|
||
| ```vue [app.vue] | ||
| <script setup lang="ts"> | ||
| const config = useRuntimeConfig() | ||
| </script> | ||
| ``` | ||
|
|
||
| ```ts [server/api/foo.ts] | ||
| export default defineEventHandler((event) => { | ||
| const config = useRuntimeConfig() | ||
| }) | ||
| ``` | ||
|
|
||
| ## Define Runtime Config | ||
|
|
||
| The example below shows how to set a public API base URL and a secret API token that is only accessible on the server. | ||
|
|
||
| We should always define `runtimeConfig` variables inside `nuxt.config`. | ||
|
|
||
| ```ts [nuxt.config.ts] | ||
| export default defineNuxtConfig({ | ||
| runtimeConfig: { | ||
| // Private keys are only available on the server | ||
| apiSecret: '123', | ||
|
|
||
| // Public keys that are exposed to the client | ||
| public: { | ||
| apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api' | ||
| } | ||
| } | ||
| }) | ||
| ``` | ||
|
|
||
| ::alert | ||
| Variables that need to be accessible on the server are added directly inside `runtimeConfig`. Variables that need to be accessible on both the client and the server are defined in `runtimeConfig.public`. | ||
| :: | ||
|
|
||
| ::ReadMore{link="/guide/features/runtime-config"} | ||
| :: | ||
|
|
||
| ## Acess Runtime Config | ||
|
|
||
| To access runtime config, we can use `useRuntimeConfig()` composable: | ||
|
|
||
| ```ts [server/api/test.ts] | ||
| export default async () => { | ||
| const config = useRuntimeConfig() | ||
|
|
||
| // Access public variables | ||
| const result = await $fetch(`/test`, { | ||
| baseURL: config.public.apiBase, | ||
| headers: { | ||
| // Access a private variable (only available on the server) | ||
| Authorization: `Bearer ${config.apiSecret}` | ||
| } | ||
| }) | ||
| return result | ||
| } | ||
| ``` | ||
|
|
||
| In this example, since `apiBase` is defined within the `public` namespace, it is universally accessible on both server and client-side, while `apiSecret` **is only accessible on the server-side**. | ||
|
|
||
| ## Environment Variables | ||
|
|
||
| It is possible to update runtime config values using a matching environment variable name prefixed with `NUXT_`. | ||
|
|
||
| ::ReadMore{link="/guide/features/runtime-config"} | ||
| :: | ||
|
|
||
| ### Using the `.env` File | ||
|
|
||
| We can set the environment variables inside the `.env` file to make them accessible during **development** and **build/generate**. | ||
|
|
||
| ``` [.env] | ||
| NUXT_PUBLIC_API_BASE_URL = "https://api.localhost:5555" | ||
| NUXT_API_SECRET = "123" | ||
| ``` | ||
|
|
||
| ::alert{type=info} | ||
| Any environment variables set within `.env` file are accessed using `process.env` in the Nuxt app during **development** and **build/generate**. | ||
| :: | ||
|
|
||
| ::alert{type=warning} | ||
| In **production runtime**, you should use platform environment variables and `.env` is not used. | ||
| :: | ||
|
|
||
| ::alert{type=warning} | ||
| When using git, make sure to add `.env` to the `.gitignore` file to avoid leaking secrets to the git history. | ||
| :: | ||
|
|
||
| ## `app` namespace | ||
|
|
||
| Nuxt uses `app` namespace in runtime-config with keys including `baseURL` and `cdnURL`. You can customize their values at runtime by setting environment variables. | ||
|
|
||
| ::alert{type=info} | ||
| This is a reserved namespace. You should not introduce additional keys inside `app`. | ||
| :: | ||
|
|
||
| ### `app.baseURL` | ||
|
|
||
| By default, the `baseURL` is set to `'/'`. | ||
|
|
||
| However, the `baseURL` can be updated at runtime by setting the `NUXT_APP_BASE_URL` as an environment variable. | ||
|
|
||
| Then, you can access this new base URL using `config.app.baseURL`: | ||
|
|
||
| ```ts [/plugins/my-plugin.ts] | ||
| export default defineNuxtPlugin((NuxtApp) => { | ||
| const config = useRuntimeConfig() | ||
|
|
||
| // Access baseURL universally | ||
| const baseURL = config.app.baseURL | ||
| }) | ||
| ``` | ||
|
|
||
| ### `app.cdnURL` | ||
|
|
||
| This example shows how to set a custom CDN url and access them using `useRuntimeConfig()`. | ||
|
|
||
| You can use a custom CDN for serving static assets inside `.output/public` using the `NUXT_APP_CDN_URL` environment variable. | ||
|
|
||
| And then access the new CDN url using `config.app.cdnURL`. | ||
|
|
||
| ```ts [server/api/foo.ts] | ||
| export default defineEventHandler((event) => { | ||
| const config = useRuntimeConfig() | ||
|
|
||
| // Access cdnURL universally | ||
| const cdnURL = config.app.cdnURL | ||
| }) | ||
| ``` | ||
|
|
||
| ::ReadMore{link="/guide/features/runtime-config"} | ||
| :: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import { normalize } from 'pathe' | ||
| import { describe, expect, it } from 'vitest' | ||
| import { ImportProtectionPlugin, vueAppPatterns } from '../src/core/plugins/import-protection' | ||
|
|
||
| const testsToTriggerOn = [ | ||
| ['~/nuxt.config', 'app.vue', true], | ||
| ['./nuxt.config', 'app.vue', true], | ||
| ['./nuxt.config.ts', 'app.vue', true], | ||
| ['nuxt.config.ts', 'app.vue', true], | ||
| ['./.nuxt/nuxt.config', 'app.vue', false], | ||
| ['.nuxt/nuxt.config', 'app.vue', false], | ||
| ['nuxt', 'components/Component.vue', true], | ||
| ['nuxt3', 'components/Component.vue', true], | ||
| ['/root/node_modules/@vue/composition-api', 'components/Component.vue', true], | ||
| ['@vue/composition-api', 'components/Component.vue', true], | ||
| ['@nuxt/kit', 'components/Component.vue', true], | ||
| ['/root/node_modules/@nuxt/kit', 'components/Component.vue', true], | ||
| ['some-nuxt-module', 'components/Component.vue', true], | ||
| ['/root/src/server/api/test.ts', 'components/Component.vue', true], | ||
| ['src/server/api/test.ts', 'components/Component.vue', true] | ||
| ] as const | ||
|
|
||
| describe('import protection', () => { | ||
| it.each(testsToTriggerOn)('should protect %s', async (id, importer, isProtected) => { | ||
| const result = await transformWithImportProtection(id, importer) | ||
| if (!isProtected) { | ||
| expect(result).toBeNull() | ||
| } else { | ||
| expect(result).toBeDefined() | ||
| expect(normalize(result)).contains('unenv/runtime/mock/proxy') | ||
| } | ||
| }) | ||
| }) | ||
|
|
||
| const transformWithImportProtection = (id: string, importer: string) => { | ||
| const plugin = ImportProtectionPlugin.rollup({ | ||
| rootDir: '/root', | ||
| patterns: vueAppPatterns({ | ||
| options: { | ||
| modules: ['some-nuxt-module'], | ||
| srcDir: 'src/', | ||
| dir: { server: 'server' } | ||
| } | ||
| } as any) | ||
| }) | ||
|
|
||
| return (plugin as any).resolveId(id, importer) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.