v3.5.0

[danielroe]

3.5.0 is a minor (feature) release with lots of new features to play with.

👀 Highlights

⚡️ Vue 3.3 released!

Vue 3.3 has been released, with lots of exciting features, particularly around type support. This also brings a significant improvement to data fetching when navigating between nested pages (#20777), thanks to @antfu and @baiwusanyu-c.

• new defineOptions macro
• 'generic' components
• typed slots and using external types in defineProps
• ... and more

Read the full release announcement for more details.

🙌 Nitropack v2.4

We've been working on lots of improvements to Nitro and these have landed already in Nitro v2.4 - you may already have this upgrade, which contains a lot of bug fixes, updates to the module worker format for Cloudflare, Vercel KV support and more.

One note: if you're deploying to Vercel or Netlify and want to benefit from incremental static regeneration, you should now update your route rules:

routeRules: {
--  '/blog/**': { swr: 3000 },
++  '/blog/**': { isr: 3000 },
}

Read the full release notes.

💖 New defaults

Rich JSON payload serialisation is now enabled by default (#19205, #20770). This is both faster and allows serialising complex objects in the payload passed from the Nuxt server to client (and also when extracting payload data for prerendered sites).

This now means that various rich JS types are supported out-of-the-box: regular expressions, dates, Map and Set and BigInt as well as NuxtError - and Vue-specific objects like ref, reactive, shallowRef and shallowReactive.

You can find an example in our test suite.

This is all possible due to Rich-Harris/devalue#58. For a long time, Nuxt has been using our own fork of devalue owing to issues serialising Errors and other non-POJO objects, but we now have transitioned back to the original.

You can even register your own custom types with a new object-syntax Nuxt plugin:

export default definePayloadPlugin(() => {
  definePayloadReducer('BlinkingText', data => data === '<original-blink>' && '_')
  definePayloadReviver('BlinkingText', () => '<revivified-blink>')
})

You can read more about how this works here.

🛝 Interactive server components

This feature should be considered highly experimental, but thanks to some great work from @huang-julien we now support interactive content within server components via slots (#20284).

You can follow the server component roadmap at #19772.

⏰ Environment config

You can now configure fully typed, per-environment overrides in your nuxt.config:

export default defineNuxtConfig({
  $production: {
    routeRules: {
      '/**': { isr: true }
    }
  },
  $development: {
    //
  }
})

If you're authoring layers, you can also use the $meta key to provide metadata that you or the consumers of your layer might use.

Read more: #20329.

💪 Fully typed pages

You can benefit from fully typed routing within your Nuxt app via this experimental integration with https://github.com/posva/unplugin-vue-router - thanks to some great work from @posva! Out of the box, this will enable typed usage of navigateTo, <NuxtLink>, router.push() and more. You can even get typed params within a page by using const route = useRoute('route-name').

export default defineNuxtConfig({
  experimental: {
    typedPages: true
  }
})

🔎 'Bundler' module resolution

We now have full support within Nuxt for the bundler strategy of module resolution. We would recommend adopting this if possible. It has type support for subpath exports, for example, but more exactly matches the behaviour of build tools like Vite and Nuxt than Node16 resolution.

export default defineNuxtConfig({
  typescript: {
    tsConfig: {
      compilerOptions: {
        moduleResolution: 'bundler'
      }
    }
  }
})

This turns on TypeScript's ability to 'follow' Node subpath exports. For example, if a library has a subpath export like mylib/path that is mapped to mylib/dist/path.mjs then the types for this can be pulled in from mylib/dist/path.d.ts rather than requiring the library author to create mylib/path.d.ts.

⚗️ Separate server types

We plan to improve clarity within your IDE between the 'nitro' and 'vue' part of your app, and we've shipped the first part of this via a separate generated tsconfig.json for your ~/server directory (#20559). You can use by adding an additional ~/server/tsconfig.json with the following content:

{
  "extends": "../.nuxt/tsconfig.server.json"
}

Although right now these values won't be respected when type checking, you should get better type hints in your IDE.

💀 Deprecations

Although we have not typed or documented the build.extend hook from Nuxt 2, we have been calling it within the webpack builder. We are now explicitly deprecating this and will remove it in a future minor version.

✅ Upgrading

As usual, our recommendation for upgrading is to run:

nuxi upgrade --force

This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.

👉 Changelog

compare changes

🚀 Enhancements

• kit: Add prepend option to addImportsDir (#20307)
• nuxt: Add scoped helper for clearing error within boundary (#20508)
• nuxt: Auto import 'watchPostEffect' and 'watchSyncEffect' from vue (#20279)
• vite: Introduce vite:configResolved hook (#20411)
• webpack: Introduce webpack:configResolved hook (#20412)
• kit: Allow vite and webpack plugins to be prepended (#20403)
• nuxt: Add layer meta and env overrides to config types (#20329)
• test-utils: Add option to configure test server port (#20443)
• nuxt: Allow access to components within app (#20604)
• kit: Support passing getter to addVitePlugin and addWebpackPlugin (#20525)
• cli: Allow greater control of nuxi analyze from cli (#20387)
• nuxt: Add nuxtApp.runWithContext (#20608)
• deps: Upgrade to nitropack v2.4 (#20688)
• nuxt: Add experimental typedPages option (#20367)
• nuxt: Add apps to nuxt build-time instance (#20637)
• cli: Allow passing overrides to other nuxi commands (#20760)
• schema: Enable rich json payloads by default (#20770)
• deps: Update vue to v3.3 (#20478)
• nuxt: Use runWithContext within callWithNuxt (#20775)
• nuxt: Add useRequestURL helper (#20765)
• nuxt: Allow fallback production content in <DevOnly> (#20817)
• kit: addBuildPlugin for builder-agnostic implementation (#20587)
• nuxt: Allow keeping fallback for NuxtClientFallback (#20336)
• nuxt: Support separate server tsconfig (#20559)
• nuxt: Full scoped slots support for server components (#20284)
• nuxt: Support parallel plugins (#20460)

🩹 Fixes

• nuxt: Remove backwards-compatible runtimeConfig proxy (#20340)
• nuxt: Add @nuxt/devtools module before core modules (#20595)
• nuxt: Properly handle query for component wrapper (#20591)
• nuxt: Skip payload extraction for island context (#20590)
• nuxt: Remove internal <FragmentWrapper> (#20607)
• nuxt: Ensure useError is called with nuxt app context (#20585)
• nuxt: Run page meta plugin on all pages (and only pages) (#20628)
• nuxt, vite: Ignore nuxt_component ssr style and isVue (#20679)
• webpack: Warn when using deprecated build.extend hook (#20605)
• nuxt: Allow resolving client nuxt app to singleton (#20639)
• nuxt: Generate empty sourcemaps for wrappers (#20744)
• nuxt: Prevent treeshaking hooks with composable names (#20745)
• kit: Prefer esm resolution for modules to install (#20757)
• vite: Expand fs.allow dirs to include app files (#20755)
• nuxt: Deduplicate global components before registration (#20743)
• nuxt: Remove webstorm compatibility augmentation (0258acdc8)
• nuxt: Enable suspensible behaviour for nested pages (#20777)
• cli: Hard-reload nuxt when .env changes (#20501)
• nuxt: Avoid destructuring error prop (works around upstream bug) (#20795)
• nuxt: Always inline styles for server/island components (#20599)
• nuxt: Allow serialising undefined refs (#20828)
• nuxt: Transform client fallbacks directly on SFCs (#20835)
• vite: Dedupe/optimize more vue core deps (#20829)
• nuxt: Get fallback for <DevOnly> from parsed html (#20840)
• nuxt: Ensure all dir parts are present in component name (#20779)
• nuxt: Allow pages:extend to enable pages module (#20806)
• nuxt: Stop loading indicator on vue errors (#20738)
• nuxt: Add types for webpack/vite environments (#20749)
• nuxt: Pass from + savedPosition to first scrollBehavior (#20859)

💅 Refactors

• schema: Move runtimeCompiler option out of experimental (#20606)
• kit: Use esm utils for resolvePath (#20756)

📖 Documentation

• Fix typo (#20577)
• Update tailwind configuration guide (#20598)
• Fix fetch composable examples (#20603)
• Note that useCookie does not share state (#20665)
• Selective pre-rendering options (#20670)
• Ensure we guard all navigateTo examples (#20678)
• Add useSeoMeta and useServerSeoMeta pages (#20656)
• Recommend <NuxtLayout> when migrating error.vue (#20690)
• Add lagon to presets list (#20706)
• Add await before lazy composable examples (7e7e006e9)
• Add missing step migrating to pinia (#20778)
• Server directory improvements (d53cc604d)

🏡 Chore

• Revert markdownlint upgrade (da29dea5c)
• Run docs lint workflow on dep upgrades (c536e5a63)
• Revert markdownlint-cli update and prevent auto-update (675445f98)
• Ban @ts-ignore (4f0d3d4ae)
• Do not install example dependencies (#20689)
• Disallow .only in tests (ad97cb45a)
• Type-check .mjs files (#20711)
• Fix typo in pnpm-workspace.yaml (#20751)
• Update target for externalVue removal (a33d2e7ae)
• Lint (742f61766)

✅ Tests

• Test with bundler module resolution (#20629)

🤖 CI

• Run autofix on renovate branches (af75f18cf)
• Run 2.x nightly release on node 16 (a81f9e4c8)
• Add conditional for node 16 test (aee1218e6)
• Set max memory for nuxt2 release script globally (d1a5719cb)
• Add workflow to release branches (bc28d536c)
• Update pr condition (f8c7b34bd)
• Update repo 🤣 (f88c1e645)
• Allow specifying tag for edge releases (5fdb6a6d6)
• Comment with link to tag of released version (f945cb197)
• Pass tag as argument (1aec0e503)
• Release edge versions of labelled prs (cdc42d044)

❤️ Contributors

• Daniel Roe (@danielroe)
• Sébastien Chopin (@Atinux)
• Anthony Fu (@antfu)
• Julien Huang (@huang-julien)
• Alexander (@xanderbarkhatov)
• Dario Ferderber (@darioferderber)
• 白雾三语 (@baiwusanyu-c)
• Inesh Bose (@ineshbose)
• Lehoczky Zoltán (@Lehoczky)
• Emile Caron (@emilecaron)
• Eckhardt (Kaizen) Dreyer (@Eckhardt-D)
• Eduardo San Martin Morote
• Tom Lienard (@QuiiBz)
• Scscgit (@scscgit)
• Clément Ollivier (@clemcode)
• Jamie Warburton (@Jamiewarb)
• Enkot (@enkot)
• Phojie Rengel (@phojie)
• Harlan Wilton (@harlan-zw)
• Gergő Jedlicska (@gjedlicska)
• Stefan Milosevic (@smilosevic)
• Pavel Mokin (@Lyrialtus)

---

This discussion was created from the release v3.5.0.

[luc122c]

Regarding the experimental 'fully typed pages': Is there any benefit switching to this over the Typed Router module?

[jd1378]

I hope we get a fix for unjs/h3#385 soon, currently images are broken over proxy

[Orbitoly]

Awesome work!
regarding the isr feature, is a WEBHOOK isr build supported or planned?

[rahulkumarsingh73690]

env is not working after this update.

 runtimeConfig: {
    public: {
      firebaseApiKey: process.env.FIREBASE_API_KEY,
      firebaseAuthDomain: process.env.FIREBASE_AUTH_DOMAIN,
      firebaseDatabaseURL: process.env.FIREBASE_DATABASE_URL,
      firebaseProjectID: process.env.FIREBASE_PROJECT_ID,
      firebaseStorageBucket: process.env.FIREBASE_STORAGE_BUCKET,
      firebaseMessagingSendID: process.env.FIREBASE_MESSAGING_SENDER_ID,
      firebaseAppID: process.env.FIREBASE_APP_ID,
    },
  },

[danielroe]

Please do open a new issue with a reproduction. I don't think anything should have changed with runtimeConfig, other than you of course need to access those values off useRuntimeConfig().public.