From 8011a1a2184bfa0d964b90ad39919b090a61c1cc Mon Sep 17 00:00:00 2001 From: Aaron Date: Wed, 23 Oct 2024 09:01:53 -0500 Subject: [PATCH] docs: Add section about env vars in the manifest --- .../config/environment-variables.md | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/docs/guide/essentials/config/environment-variables.md b/docs/guide/essentials/config/environment-variables.md index 8e299665c..e287b34a5 100644 --- a/docs/guide/essentials/config/environment-variables.md +++ b/docs/guide/essentials/config/environment-variables.md @@ -56,3 +56,26 @@ Vite provides two other environment variables, but they aren't useful in WXT pro - `import.meta.env.BASE_URL`: Use `browser.runtime.getURL` instead. - `import.meta.env.SSR`: Always `false`. ::: + +## Manifest + +To use environment variables in the manifest, you need to use the function syntax: + +```ts +export default defineConfig({ + extensionApi: 'chrome', + modules: ['@wxt-dev/module-vue'], + manifest: { // [!code --] + oauth2: { // [!code --] + client_id: import.meta.env.WXT_APP_CLIENT_ID // [!code --] + } // [!code --] + } // [!code --] + manifest: () => ({ // [!code ++] + oauth2: { // [!code ++] + client_id: import.meta.env.WXT_APP_CLIENT_ID // [!code ++] + } // [!code ++] + }), // [!code ++] +}); +``` + +WXT can't load your `.env` files until after the config file has been loaded. So by using the function syntax for `manifest`, it defers creating the object until after the `.env` files are loaded into the process.