
In Nuxt 3, there's no main.ts entry point like in plain Vue 3 apps—instead, you can safely import core-js in a dedicated Nuxt plugin (executed before app initialization) to ensure polyfills load early and consistently across all browser environments.
in nuxt 3, there's no `main.ts` entry point like in plain vue 3 apps—instead, you can safely import `core-js` in a dedicated nuxt plugin (executed before app initialization) to ensure polyfills load early and consistently across all browser environments.
Nuxt 3 uses a plugin-based boot system where files in the plugins/ directory are automatically registered and executed during app startup. To polyfill older browsers reliably with core-js, you should create a client-side plugin—because polyfills are only needed in the browser, not during SSR.
✅ Step-by-step setup:
-
Install core-js:
npm install core-js # or yarn add core-js
-
Create a new plugin file: plugins/polyfill.client.ts
// plugins/polyfill.client.ts import 'core-js/stable' import 'regenerator-runtime/runtime'
? Note the .client.ts suffix — this tells Nuxt to run this plugin only on the client, avoiding SSR errors and unnecessary bundle bloat on the server.
- Ensure the plugin is auto-registered — no extra configuration needed, as long as it’s placed in plugins/ and follows the naming convention (*.client.ts or *.server.ts).
? Why not app.vue?
Importing polyfills directly in app.vue (e.g., in <script setup> or onBeforeMount) is too late: many native APIs may already be used by Nuxt’s internal runtime or composables before component mount. Early, global polyfilling is essential for correctness.
⚠️ Important considerations:
- Avoid importing core-js in nuxt.config.ts, composables/, or shared utilities — those may execute during SSR or build time, leading to errors or duplicated polyfills.
- Prefer granular imports (e.g., core-js/stable/array/find, core-js/stable/promise) over the full core-js/stable if bundle size matters — but verify coverage for your target browsers (e.g., IE11, Safari < 14).
- Always test in your oldest supported browser — especially for features like Array.from, Promise.finally, or optional chaining fallbacks.
✅ Bonus: For fine-grained control (e.g., conditional polyfilling), you can wrap logic in a dynamic check:
// plugins/polyfill.client.ts
if (typeof Promise === 'undefined' || !Array.prototype.find) {
import('core-js/stable')
import('regenerator-runtime/runtime')
}But note: dynamic import() delays execution — use only if strictly necessary; static imports are safer and more reliable for foundational polyfills.
In summary: Use plugins/polyfill.client.ts with static core-js/stable import — it’s the most robust, Nuxt-native, and SSR-safe approach.


















