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.

Sign up for GitHub

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

Jump to bottom

chore(deps): update dependency nuxt to v3 #846

Closed
wants to merge 1 commit into from
Closed

chore(deps): update dependency nuxt to v3 #846

wants to merge 1 commit into from

Conversation

renovate[bot]
Copy link
Contributor

@renovate renovate bot commented May 6, 2024

Mend Renovate

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
nuxt (source) 2.17.3 -> 3.11.2 age adoption passing confidence

Release Notes

nuxt/nuxt (nuxt)

v3.11.2

Compare Source

3.11.2 is the next regularly scheduled patch release.

✅ 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

🔥 Performance
  • nuxt: Don't tree-shake useServerHead in dev (#​26421)
  • nuxt: Reduce nuxt island payload (#​26569)
  • nuxt: Unsubscribe from watch when scope is disposed (#​26554)
  • nuxt: Reduce router resolutions (#​26519)
🩹 Fixes
  • nuxt: Handle underscores in island names (#​26370)
  • nuxt: Don't append new route for redirect if one exists (#​26368)
  • nuxt: Ignore navigateTo open option on server side (#​26392)
  • nuxt: Print errors when compiling templates (#​26410)
  • nuxt: Don't warn about definePageMeta in server pages (#​26422)
  • nuxt: Pass joinRelativeURL + share paths on server (#​26407)
  • nuxt: Exclude <srcDir>/index.html from import protection (#​26430)
  • nuxt: Early return from refreshCookie on server (22ada37b4)
  • nuxt: Move v-if to wrapper in islands transform (#​26386)
  • nuxt: Move directives to client component island wrapper (#​26387)
  • nuxt: Ignore fetch errors in getLatestManifest (#​26486)
  • nuxt: Check island element instead of hydration state (#​26480)
  • nuxt: Add build id to rendered payload url (#​26504)
  • nuxt: Support serialising rich server logs (#​26503)
  • nuxt: Handle errors parsing/stringifying logs (4a87c35df)
  • nuxt: Augment GlobalComponents in multiple vue modules (#​26541)
  • nuxt: Suppress warning about resolve cache-driver (#​26595)
  • nuxt: Handle auto-importing named components (#​26556)
  • schema: Update webpack transformAssetUrls + pass hoistStatic to vite plugin (#​26563)
  • schema: Document use case for typescript.shim (#​26607)
  • nuxt: Normalise rollup opts in island transform w/o nuxt (#​26589)
  • nuxt: Handle missing Nuxt context in useRoute (#​26633)
💅 Refactors
  • nuxt: Remove duplicated check (#​26544)
  • nuxt: Simplify check in navigateTo for server (#​26546)
  • nuxt: Simplify runtimeConfig initialization of client side (#​26558)
📖 Documentation
  • Update information about playwright test runner (8e635fd23)
  • Add info about dependencies to install (a258bfc34)
  • Add missing end block (f55f74798)
  • Migration page typo (#​26389)
  • Advise installing nuxi for debugging with pnpm (#​26447)
  • Warn about single root element for server components (#​26462)
  • Adjust grammar (#​26482)
  • Add contents of the layout in examples (#​26532)
  • Add note about prerenderRoutes in dynamic routes (#​26547)
  • Clarify app-config merging strategy note (#​26564)
  • Update core modules roadmap (#​26553)
  • Replace process.* with import.meta.* (#​26611)
  • Correct grammar in typescript.shim JSDoc (#​26626)
  • Add missing comma (#​26644)
🏡 Chore
❤️ Contributors

v3.11.1

Compare Source

3.11.1 is a patch release addressing regressions in v3.11.0.

✅ 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

🩹 Fixes
  • nuxt: Ignore console.logs called outside event context (b3ced3d69)
  • schema: Include ofetch in typescript.hoist defaults (#​26316)
  • nuxt: Conditionally use tsx parser (#​26314)
  • nuxt: Correct finish types and add to docs (0d9c63b82)
  • nuxt: Ignore failures to access asyncContext in environments without it (523db1a19)
  • nuxt: Handle failure creating BroadcastChannel (#​26340)
  • nuxt: Don't warn when injecting client-only components (#​26341)
  • nuxt: Prevent losing pages routes on prerender (#​26354)
  • nuxt: Pass undefined name when resolving trailing slash (#​26358)
  • vite: Use ssr result if it exists (#​26356)
📖 Documentation
  • Fix code block formatting for usePreviewMode (#​26303)
  • Fix confusing wording (#​26301)
  • Add note that useId must be used with single root element (401370b3a)
  • Mention <DevOnly> component in api section (#​26029)
  • Note that @nuxt/schema should be used by module authors (#​26190)
  • Add routeNameSplitter example in migration docs (#​25838)
🏡 Chore
  • nuxt: Remove unused code (#​26319)
  • Revert update github/codeql-action action (c72951b06)
🤖 CI
  • Configure npm registry in release workflow (68f7d4df8)
❤️ Contributors

v3.11.0

Compare Source

👀 Highlights

This is possibly the last minor release before Nuxt v4, and so we've packed it full of features and improvements we hope will delight you! ✨

🪵 Better logging

When developing a Nuxt application and using console.log in your application, you may have noticed that these logs are not displayed in your browser console when refreshing the page (during server-side rendering). This can be frustrating, as it makes it difficult to debug your application. This is now a thing of the past!

Now, when you have server logs associated with a request, they will be bundled up and passed to the client and displayed in your browser console. Asynchronous context is used to track and associate these logs with the request that triggered them. (#​25936).

For example, this code:

<script setup>
console.log('Log from index page')

const { data } = await useAsyncData(() => {
  console.log('Log inside useAsyncData')
  return $fetch('/api/test')
})
</script>

will now log to your browser console when you refresh the page:

Log from index page
[ssr] Log inside useAsyncData 
    at pages/index.vue

👉 We also plan to support streaming of subsequent logs to the Nuxt DevTools in future.

We've also added a dev:ssr-logs hook (both in Nuxt and Nitro) which is called on server and client, allowing you to handle them yourself if you want to.

If you encounter any issues with this, it is possible to disable them - or prevent them from logging to your browser console.

export default defineNuxtConfig({
  features: {
    devLogs: false
    // or 'silent' to allow you to handle yourself with `dev:ssr-logs` hook
  },
})
🎨 Preview mode

A new usePreviewMode composable aims to make it simple to use preview mode in your Nuxt app.

const { enabled, state } = usePreviewMode()

When preview mode is enabled, all your data fetching composables, like useAsyncData and useFetch will rerun, meaning any cached data in the payload will be bypassed.

Read more in the docs.

💰 Cache-busting payloads

We now automatically cache-bust your payloads if you haven't disabled Nuxt's app manifest, meaning you shouldn't be stuck with outdated data after a deployment.

👮‍♂️ Middleware routeRules

It's now possible to define middleware for page paths within the Vue app part of your application (that is, not your Nitro routes) (#​25841).

export default defineNuxtConfig({
  routeRules: {
    '/admin/**': {
      // or appMiddleware: 'auth'
      appMiddleware: ['auth']
    },
    '/admin/login': {
      // You can 'turn off' middleware that would otherwise run for a page
      appMiddleware: {
        auth: false
      }
    },
  },
})

⌫ New clear data fetching utility

Now, useAsyncData and useFetch expose a clear utility. This is a function that can be used to set data to undefined, set error to null, set pending to false, set status to idle, and mark any currently pending requests as cancelled. (#​26259)

<script setup lang="ts">
const { data, clear } = await useFetch('/api/test')

const route = useRoute()
watch(() => route.path, (path) => {
  if (path === '/') clear()
})
</script>
🕳️ New #teleports target

Nuxt now includes a new <div id="teleports"></div> element in your app within your <body> tag. It supports server-side teleports, meaning you can do this safely on the server:

<template>
  <Teleport to="#teleports">
    <span>
      Something
    </span>
  </Teleport>
</template>
🚦 Loading indicator and transition controls

It's now possible to set custom timings for hiding the loading indicator, and forcing the finish() method if needed (#​25932).

There's also a new page:view-transition:start hook for hooking into the View Transitions API (#​26045) if you have that feature enabled.

🛍️ Server- and client-only pages

This release sees server- and client-only pages land in Nuxt! You can now add a .server.vue or .client.vue suffix to a page to get automatic handling of it.

Client-only pages will render entirely on the client-side, and skip server-rendering entirely, just as if the entire page was wrapped in <ClientOnly>. Use this responsibly. The flash of load on the client-side can be a bad user experience so make sure you really need to avoid server-side loading. Also consider using <ClientOnly> with a fallback slot to render a skeleton loader (#​25037).

⚗️ Server-only pages are even more useful because they enable you to integrate fully-server rendered HTML within client-side navigation. They will even be prefetched when links to them are in the viewport - so you will get instantaneous loading (#​24954).

🤠 Server component bonanza

When you are using server components, you can now use the nuxt-client attribute anywhere within your tree (#​25479).

export default defineNuxtConfig({
  experimental: {
    componentIslands: {
      selectiveClient: 'deep'
    }
  },
})

You can listen to an @error event from server components that will be triggered if there is any issue loading the component (#​25798).

Finally, server-only components are now smartly enabled when you have a server-only component or a server-only page within your project or any of its layers (#​26223).

[!WARNING]
Server components remain experimental and their API may change, so be careful
before depending on implementation details.

🔥 Performance improvements

We've shipped a number of performance improvements, including only updating changed virtual templates (#​26250), using a 'layered' prerender cache (#​26104) that falls back to filesystem instead of keeping everything in memory when prerendering - and lots of other examples.

📂 Public assets handling

We have shipped a reimplementation of Vite's public asset handling, meaning that public assets in your public/ directory or your layer directories are now resolved entirely by Nuxt (#​26163), so if you have added nitro.publicAssets directories with a custom prefix, these will now work.

📦 Chunk naming

We have changed the default _nuxt/[name].[hash].js file name pattern for your JS chunks. Now, we default to _nuxt/[hash].js. This is to avoid false positives by ad blockers triggering off your component or chunk names, which can be a very difficult issue to debug. (#​26203)

You can easily configure this to revert to previous behaviour if you wish:

export default defineNuxtConfig({
  vite: {
    $client: {
      build: {
        rollupOptions: {
          output: {
            chunkFileNames: '_nuxt/[name].js',
            entryFileNames: '_nuxt/[name].js'
          }
        }
      }
    }
  },
})
💪 Type fixes

Previously users with shamefully-hoist=false may have encountered issues with types not being resolved or working correctly. You may also have encountered problems with excessive type instantiation.

We now try to tell TypeScript about certain key types so they can be resolved even if deeply nested (#​26158).

There are a whole raft of other type fixes, including some regarding import types (#​26218 and #​25965) and module typings (#​25548).

✅ 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
  • nuxt: Server-only pages (#​24954)
  • nuxt: Client-only pages (#​25037)
  • nuxt: Allow using nuxt-client in all components (#​25479)
  • nuxt: Add page:view-transition:start hook (#​26045)
  • nuxt: Custom loading reset/hide delay + force finish() (#​25932)
  • nuxt: Emit error if <NuxtIsland> can't fetch island (#​25798)
  • nuxt: usePreviewMode composable (#​21705)
  • nuxt: Support async transforms for data composables (#​26154)
  • nuxt: Add dedicated #teleports element for ssr teleports (#​25043)
  • nuxt: Enable islands if server pages/components present (#​26223)
  • nuxt: Allow generating metadata for nuxt components (#​26204)
  • vite: Handle multiple/custom public dirs (#​26163)
  • schema: Allow configuring type hoists with typescript.hoist (85166cced)
  • nuxt: Pass nuxt instance to getCachedData (#​26287)
  • nuxt: Pass server logs to client (#​25936)
  • nuxt: Add nuxtMiddleware route rule (#​25841)
  • nuxt: Add clear utility to useAsyncData/useFetch (#​26259)
🔥 Performance
  • Early return chained functions with falsy values (#​25647)
  • nuxt: Don't check isPrerendered in dev for server page (#​26061)
  • nuxt: Use fallthrough cache for prerender (#​26104)
  • nuxt: Tree shake island renderer (8323220f7)
  • nuxt: Skip adding selective-client code if not enabled (#​26176)
  • nuxt: Use faster approach to check cache exists (#​26172)
  • nuxt: Only update changed templates (#​26250)
🩹 Fixes
  • kit: Apply nuxt types to .config/nuxt.config (5440ecece)
  • kit: Widen pattern to .config/nuxt.* (7815aa534)
  • nuxt: Align error in showError/createError with h3 (#​25945)
  • kit: Don't warn if middleware is added twice (08b656a04)
  • nuxt: Don't try to strip directory file extensions (#​25965)
  • nuxt: Produce valid css selector from useId (#​25969)
  • schema: Add vueCompilerOptions property to tsConfig (#​25924)
  • nuxt: Skip vue style blocks in unctx transform (#​26059)
  • nuxt: Pass event to useRuntimeConfig in Nuxt renderer (#​26058)
  • schema: Disable typescript.shim in favour of volar (#​26052)
  • nuxt: Only check if server page is prerendered on client (#​26081)
  • nuxt: Don't refetch server components in initial html (#​26089)
  • nuxt: Resolve defu/h3 paths in type templates (#​26085)
  • nuxt: Use exported toExports from unimport (#​26086)
  • nuxt: Cache-bust payloads with build id (#​26068)
  • nuxt: Export AsyncDataRequestStatus type (#​26023)
  • nuxt: Add space before <html> and <body> attrs (#​26027)
  • kit: Resolve module node_modules for modulesDir (#​25548)
  • nuxt: Handle external redirects from routeRules (#​26120)
  • nuxt: Use flat cache directory for prerender data (47cdd7dd0)
  • nuxt: Watch custom cookieRef values deeply (#​26151)
  • nuxt: Access prerender cache synchronously (#​26146)
  • nuxt: Provide typescript aliases for core packages (#​26158)
  • nuxt: Handle errors resolving package paths (63bfaac12)
  • kit: Handle errors resolving module path (3782ac0a2)
  • nuxt: Clone paths to prevent shared object (264bf9833)
  • nuxt: Detect component usage within ssrRender (#​26162)
  • nuxt: Improved plugin annotating warnings (#​26193)
  • nuxt: Generate typed routes after pages are scanned (#​26206)
  • nuxt: Only strip supported extensions when generating import types (#​26218)
  • nuxt: Init payload when using islands with ssr: false (f080c426a)
  • nuxt: Register/scan plugins with jsx/tsx extensions (#​26230)
  • nuxt: Update auto imports after other templates (#​26249)
  • nuxt: Respect baseUrl within server components (#​25727)
  • nuxt: Access shared asyncData state with useNuxtData (#​22277)
  • vite: Explicitly import publicAssetsURL (9d08cdfd1)
  • nuxt: Don't ignore any files from buildAssetsDir (81933dfc3)
  • vite: Drop name prefix for client chunk file names (#​26203)
  • kit: Clone middleware when adding to app (5be9253cf)
  • nuxt: Don't generate separate chunk for stubs (#​26291)
  • nuxt: Use joinRelativeURL for build assets (#​26282)
  • schema: Allow passing deep to selectiveClient (357f8db41)
  • schema: Don't hoist types for consola for now (adbd53a25)
  • nuxt: Guard window access more carefully (977377777)
  • nuxt: Provide appMiddleware types with universal router (87c0678f9)
  • nuxt: Handle nightly releases for hoisted types (3c7e68c84)
💅 Refactors
  • nuxt: Simplify request computation (#​26191)
  • nuxt: Rename nuxtMiddleware to appMiddleware (cac745470)
  • nuxt: Use addTypeTemplate for page augmentations (4925670dc)
  • nuxt: Use addTypeTemplate in more places (33ce71dd1)
📖 Documentation
  • Mention when useId composable was introduced (#​25953)
  • Add domEnvironment option to testing example (#​25972)
  • Update VS Code settings (#​25985)
  • Mention island features are SFC only (#​26013)
  • Improve pick and transform doc (#​26043)
  • Fix 404 link (8e6d2306c)
  • Add Nuxt Fonts to changelog (#​26077)
  • Update roadmap (#​26072)
  • Document fallback prop for <NuxtLayout> (#​26091)
  • Add documentation for using layers with private repos (#​26094)
  • Remove twoslash from code sample (0bf70bd7a)
  • Update cssnano website url (d6edb30c5)
  • Add warning about latest vue-tsc (#​26083)
  • Improve readme readability (#​26118)
  • Added bridge macros.pageMeta and typescript.esbuild option (#​26136)
  • Fix bracket escape on definePageMeta page (#​26139)
  • Add app:manifest:update hook (#​26192)
  • Add cache.varies docs for multi-tenant use case (#​26197)
  • Add mentions on Vue School tutorials (#​25997)
  • Update link to zhead (e889a7df5)
  • Added modular architecture use case for Layers (#​26240)
  • Escape 'elements' in jsdoc comments (5c6dc4c14)
  • Use a more common word (#​26276)
  • Split a sentence in two to improve readability (#​26279)
  • Removed unused composable example (#​26283)
  • Add more keywords for reducer/reviver docs (6b1f3438b)
  • Link to pinceau repo rather than website (#​26286)
  • Add link to ofetch repo (#​26284)
  • Improve section titles in error-handling docs (#​26288)
  • Add example for clear (24217a992)
  • Add docs about playwright runner support (115298a44)
  • Add some appMiddleware docs (da8e8eba8)
🏡 Chore
✅ Tests
  • Use retryable assertion for scrollY (#​26298)
  • Also run composables test with appManifest off (205d0e2fa)
  • Remove wait for networkidle (9b5bffbbb)
  • Use locator assertion for body text (3d77e267d)
  • Use function assertion for second scrollY test (d981c056d)
  • Add type test for appMiddleware route rules (70669012f)
🤖 CI
  • Clean up pr cache when it is merged (#​25873)
  • Skip checking stackoverflow link (0a8c3444a)
  • Fix lychee configuration (375bd64c5)
  • Run lint step after bundle test (c3c9c4b2a)
  • Release in ci when a v3 tag is pushed (c78c1161a)
  • Do not cache Playwright browsers (#​26296)
❤️ Contributors

v3.10.3

Compare Source

3.10.3 is a regularly-scheduled patch release.

✅ 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 vue and unjs ecosystems.

👉 Changelog

compare changes

🩹 Fixes
  • nuxt: Respect dedupe option in useFetch (#​25815)
  • nuxt: Bypass browser cache when fetching app build id (#​25813)
  • nuxt: In dev, don't link css files with ?inline query (#​25822)
  • nuxt: Pass external to navigate in custom <NuxtLink> (#​25887)
  • nuxt: Mark internal island components with @__PURE__ (#​25842)
  • nuxt: Use setTimeout before scrolling when navigating (#​25817)
  • nuxt: Add missing type for head in defineNuxtComponent (#​25410)
  • nuxt: Handle undefined paths in resolveTrailingSlashBehavior (ba6a4132b)
  • nuxt: Set to.name to be undefined rather than deleting entirely (4ca1ab7cf)
📖 Documentation
  • Enable more blocks for twoslash (#​25830)
  • Remove .ts extension when adding compiled files (#​25855)
  • Replace callout to new components (#​25897)
  • Fix incorrect wording (#​25902)
🏡 Chore
  • Use nuxt.config to enable pages for docs typecheck (72a2e23cc)
  • Restore environment back to development (3f92cf04d)
  • Unpin vite version 🙈 (d326e054d)
  • nuxt: Use Exclude rather than Omit (3fc4231d3)
🤖 CI
  • Typecheck code samples in docs (#​25777)
  • Update link to stackblitz mcve page (59dd5fd93)
❤️ Contributors

v3.10.2

Compare Source

3.10.2 is a regularly-scheduled patch release.

✅ 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 vue and unjs ecosystems.

👉 Changelog

compare changes

🩹 Fixes
  • nuxt: Export refreshCookie (#​25635)
  • nuxt: Allow prefetching urls with query string (#​25658)
  • nuxt: Remove undefined keys in route object (#​25667)
  • vite: Treat .pcss extension as a CSS extension (#​25673)
  • nuxt: Don't check for layout/page with <ClientOnly> (#​25714)
  • vite: Strip query strings for style chunk filenames (#​25764)
  • nuxt: Inline entry styles before component styles (#​25749)
  • vite: Optimise layer dependencies with vite (#​25752)
  • nuxt: Don't add extra baseURL on server useRequestURL (#​25765)
  • schema: Use rootDir, not process.cwd, for modulesDir (#​25766)
  • nuxt: Only warn for useId if attrs were not rendered (#​25770)
  • kit: Don't mutate existing component entry when overriding (#​25786)
📖 Documentation
🏡 Chore
  • schema: Add missing closing code block (#​25641)
❤️ Contributors

v3.10.1

Compare Source

3.10.1 is a regularly-scheduled patch release.

✅ 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 vue and unjs ecosystems.

👉 Changelog

compare changes

🔥 Performance
  • nuxt: Clear route meta build cache when pages change (#​25514)
🩹 Fixes
  • nuxt: Fix syntax error when serializing route meta (#​25515)
  • nuxt: Only request animation frame on client (#​25569)
  • schema: Correctly set value for app.viewTransition (#​25581)
  • nuxt: Correct return type of refresh functions (#​25568)
  • nuxt: Broadcast cookie change in correct format (#​25598)
  • nuxt: Generate typed route declarations when building (#​25593)
  • nuxt: Remove key from useId type signature (#​25614)
  • nuxt: Remove $ from generated id in useId (#​25615)
  • nuxt: Don't set default rel for same-site external links (#​25600)
  • nuxt: Warn if inheritAttrs: false when using useId (#​25616)
  • nuxt: Fetch non-server rendered islands when hydrating (#​25613)
  • nuxt: Don't check page/layout usage when redirecting (#​25628)
💅 Refactors
📖 Documentation
  • Correct typo (#​25523)
  • Add and link to a section on Nuxt context (#​23546)
  • Explain how to set <NuxtLink> defaults in nuxt config (#​25610)
🏡 Chore
  • Use pathe in internal tests (e33cec958)
  • nuxt: Rename nuxt -> nuxtApp internally for consistency (c5d5932f5)
🤖 CI
  • Fix playwright cache (#​25527)
  • Retry flaky test when running in Windows with Webpack (#​25536)
  • Retry flaky test when running in Windows with Webpack (#​25543)
  • Retry flaky test when using Webpack (#​25550)
  • Simplify label PR workflow (#​25579)
❤️ Contributors

v3.10.0

Compare Source

3.10.0 is the next minor/feature release.

👀 Highlights

v3.10 comes quite close on the heels of v3.9, but it's packed with features and fixes. Here are a few highlights.

✨ Experimental shared asyncData when prerendering

When prerendering routes, we can end up refetching the same data over and over again. In Nuxt 2 it was possible to create a 'payload' which could be fetched once and then accessed in every page (and this is of course possible to do manually in Nuxt 3 - see this article).

With #​24894, we are now able to do this automatically for you when prerendering. Your useAsyncData and useFetch calls will be deduplicated and cached between renders of your site.

export defineNuxtConfig({ 
  experimental: { 
    sharedPrerenderData: true
  } 
})

[!IMPORTANT]
It is particularly important to make sure that any unique key of your data is always resolvable to the same data. For example, if you are using useAsyncData to fetch data related to a particular page, you should provide a key that uniquely matches that data. (useFetch should do this automatically.)

👉 See full documentation.

🆔 SSR-safe accessible unique ID creation

We now ship a useId composable for generating SSR-safe unique IDs (#​23368). This allows creating more accessible interfaces in your app. For example:

<script setup>
const emailId = useId()
const passwordId = useId()
</script>

<template>
  <form>
    <label :for="emailId">Email</label>
    <input
      :id="emailId"
      name="email"
      type="email"
    >
    <label :for="passwordId">Password</label>
    <input
      :id="passwordId"
      name="password"
      type="password"
    >
  </form>
</template>
✍️ Extending app/router.options

It's now possible for module authors to inject their own router.options files (#​24922). The new pages:routerOptions hook allows module authors to do things like add custom scrollBehavior or add runtime augmenting of routes.

👉 See full documentation.

Client-side Node.js support

We now support (experimentally) polyfilling key Node.js built-ins (#​25028), just as we already do via Nitro on the server when deploying to non-Node environments.

That means that, within your client-side code, you can import directly from Node built-ins (node: and node imports are supported). However, nothing is globally injected for you, to avoid increasing your bundle size unnecessarily. You can either import them where needed.

import { Buffer } from 'node:buffer'
import process from 'node:process'

Or provide your own polyfill, for example, inside a Nuxt plugin.

// ~/plugins/node.client.ts
import { Buffer } from 'node:buffer'
import process from 'node:process'

globalThis.Buffer = Buffer
globalThis.process = process

export default defineNuxtPlugin({})

This should make life easier for users who are working with libraries without proper browser support. However, because of the risk in increasing your bundle unnecessarily, we would strongly urge users to choose other alternatives if at all possible.

🍪 Better cookie reactivity

We now allow you to opt-in to using the CookieStore. If browser support is present, this will then be used instead of a BroadcastChannel to update useCookie values reactively when the cookies are updated (#​25198).

This also comes paired with a new composable, refreshCookie which allows manually refreshing cookie values, such as after performing a request. See full documentation.

🏥 Detecting anti-patterns

In this release, we've also shipped a range of features to detect potential bugs and performance problems.

  • We now will throw an error if setInterval is used on server (#​25259).
  • We warn (in development only) if data fetch composables are used wrongly (#​25071), such as outside of a plugin or setup context.
  • We warn (in development only) if you are not using <NuxtPage /> but have the vue-router integration enabled (#​25490). (<RouterView /> should not be used on its own.)
🧂 Granular view transitions support

It's now possible to control view transitions support on a per-page basis, using definePageMeta (#​25264).

You need to have experimental view transitions support enabled first:

export default defineNuxtConfig({
  experimental: {
    viewTransition: true
  },
  app: {
    // you can disable them globally if necessary (they are enabled by default)
    viewTransition: false
  }
})

And you can opt in/out granularly:

// ~/pages/index.vue
<script setup lang="ts">
definePageMeta({
  viewTransition: false
})
</script>

Finally, Nuxt will not apply View Transitions if the user's browser matches prefers-reduced-motion: reduce (#​22292). You can set viewTransition: 'always'; it will then be up to you to respect the user's preference.

🏗️ Build-time route metadata

It's now possible to access routing metadata defined in definePageMeta at build-time, allowing modules and hooks to modify and change these values (#​25210).

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

Please, experiment with this and let us know how it works for you. We hope to improve performance and enable this by default in a future release so modules like @nuxtjs/i18n and others can provide a deeper integration with routing options set in definePageMeta.

📦 Bundler module resolution

With #​24837, we are now opting in to the TypeScript bundler resolution which should more closely resemble the actual way that we resolve subpath imports for modules in Nuxt projects.

'Bundler' module resolution is recommended by Vue and by Vite, but unfortunately there are still many packages that do not have the correct entries in their package.json.

As part of this, we opened 85 PRs across the ecosystem to test switching the default, and identified and fixed some issues.

If you need to switch off this behaviour, you can do so. However, please consider raising an issue (feel free to tag me in it) in the library or module's repo so it can be resolved at source.

export default defineNuxtConfig({
  future: {
    typescriptBundlerResolution: false
  }
})

✅ 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

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

  • If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

@netlify Netlify
Copy link

netlify bot commented May 6, 2024 •
edited
Loading

✅ Deploy Preview for nuxt-tailwindcss ready!

Name Link
🔨 Latest commit aaabdc5
🔍 Latest deploy log https://app.netlify.com/sites/nuxt-tailwindcss/deploys/6638b63c98b79f0008be49d6
😎 Deploy Preview https://deploy-preview-846--nuxt-tailwindcss.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@ineshbose ineshbose closed this May 7, 2024
@ineshbose ineshbose deleted the renovate/major-nuxt branch May 7, 2024 14:09
@renovate Renovate
Copy link
Contributor Author

renovate bot commented May 7, 2024

Renovate Ignore Notification

Because you closed this PR without merging, Renovate will ignore this update. You will not get PRs for any future 3.x releases. But if you manually upgrade to 3.x then Renovate will re-enable minor and patch updates automatically.

If you accidentally closed this PR, or if you changed your mind: rename this PR to get a fresh replacement PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@ineshbose