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 devdependency nuxt to ^3.11.0 #64

Merged
merged 2 commits into from
Mar 18, 2024
Merged

chore(deps): update devdependency nuxt to ^3.11.0 #64

merged 2 commits into from
Mar 18, 2024

Conversation

hywax-assistant
Copy link
Collaborator

This PR contains the following updates:

Package Type Update Change
nuxt (source) devDependencies minor ^3.10.3 -> ^3.11.0

Release Notes

nuxt/nuxt (nuxt)

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

Configuration

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

🚦 Automerge: Enabled.

♻ 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 Hywax Assistant.

@hywax-assistant hywax-assistant added the dependencies Pull requests that update a dependency file label Mar 17, 2024
@hywax-assistant
Copy link
Collaborator Author

Edited/Blocked Notification

Renovate will not automatically rebase this PR, because it does not recognize the last commit author and assumes somebody else may have edited the PR.

You can manually request rebase by checking the rebase/retry box above.

⚠ Warning: custom changes will be lost.

@hywax hywax merged commit 3db72d4 into main Mar 18, 2024
3 checks passed
@hywax hywax deleted the renovate/all-minor-patch branch March 18, 2024 20:33
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
dependencies Pull requests that update a dependency file
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@hywax-assistant @hywax