Vue Updates
114 subscribers
693 photos
841 links
Channel for automatic notifications about updates in the Vue ecosystem.

Watching: vue, nuxt, vuetify, vue-i18n-next, vue-router, pinia and vite

Contacts: @Black_Yuzia

Our channels:
@Vue_Courses
@Vue_Updates
@frontendmasters_courses
Download Telegram
vite-plugin-vue
[email protected]

#vite #vite_plugin_vue

Please refer to CHANGELOG.md for details.
NuxtJS
v3.9.0

#nuxt3.9.0 is the next minor release.

πŸ‘€ Highlights

A very merry Christmas to you and yours from all Nuxters involved in this release! πŸŽπŸŽ„

We have lots of features packed into v3.9.0 and can't wait for you to try them out.

⚑️ Vite 5

This release comes with Vite 5 and Rollup 4 support. Module authors may need to check to ensure that any vite plugins you're creating are compatible with these latest releases.

This comes with a whole host of great improvements and bug fixes - check out the Vite changelog for more info.

✨ Vue 3.4 ready

This release is tested with the latest Vue 3.4 release candidate, and has the necessary configuration to take advantage of new features in Vue 3.4, including debugging hydration errors in production (just set debug: true) in your Nuxt config.

πŸ‘‰ To take advantage, just update your vue version once v3.4 is released, or try out the release candidate today:
{
"dependencies": {
"nuxt": "3.9.0",
"vue": "3.4.0-rc.1",
"vue-router": "latest"
}
}
Vue Updates
NuxtJS v3.9.0 #nuxt3.9.0 is the next minor release. πŸ‘€ Highlights A very merry Christmas to you and yours from all Nuxters involved in this release! πŸŽπŸŽ„ We have lots of features packed into v3.9.0 and can't wait for you to try them out. ⚑️ Vite 5 This…
🏝️ Interactive Server Components

This is a highly-experimental update, but it's now possible to play around with interactive components within Nuxt server components. You'll need to enable this new feature additionally to component islands:
export default defineNuxtConfig({
experimental: {
componentIslands: {
selectiveClient: true
}
}
})

Now, within a server component, you can specify components to hydrate by using the nuxt-client directive:
">
<NuxtLink :to="/" nuxt-client />

We're pretty excited about this one - so do let us know how you're using it! πŸ™

πŸ”₯ Automatic Server Optimisations

We now use Vite's new AST-aware 'define' to perform more accurate replacements on server-side code, meaning code like this will no longer throw an error:
if (document) { console.log(document.querySelector('div')) } ">
<script setup lang="ts">
if (document) {
console.log(document.querySelector('div'))
}
script>

This hasn't been possible until now because we haven't wanted to run the risk of accidentally replacing normal words like document within non-JS parts of your apps. But Vite's new define functionality is powered by esbuild and is syntax-aware, so we feel confident in enabling this functionality. Nevertheless, you can opt out if you need to:
export default defineNuxtConfig({
hooks: {
'vite:extendConfig' (config) {
delete config.define!.document
}
}
})


🚦 Granular Loading API

We now have a new hook-based system for , including a useLoadingIndicator composable that lets you control/stop/start the loading state. You can also hook into page:loading:start and page:loading:end if you prefer.

You can read more in the docs and in the original PR (#24010).

🏁 Run single events in callOnce

Sometimes you only want to run code once, no matter how many times you load a page - and you don't want to run it again on the client if it ran on the server.

For this, we have a new utility: callOnce (#24787).
<script setup>
const websiteConfig = useState('config')

await callOnce(async () => {
console.log('This will only be logged once')
websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
})
script>

Note that this utility is context-aware so it must be called in component setup function or Nuxt plugin, as with other Nuxt composables.

Read more in the docs.

🚨 Error Types

For a while now, errors returned by useAsyncData and useFetch have been typed pretty generically as Error. We've significantly improved the type possibilities for them to make them more accurate in terms of what you'll actually receive. (We normalise errors with the h3 createError utility under the hood, so they can be serialised from server to client, for example.)

We've tried to implement the type change in a backwards compatible way, but you might notice that you need to update the generic if you're manually configuring the generics for these composables. See (#24396) for more information, and do let us know if you experience any issues.

πŸ”₯ Schema Performance

We've taken some time in this release to make some minor performance improvements, so you should notice some things are a bit faster. This is an ongoing project and we have ideas for improving initial load time of the Nuxt dev server.

βœ… 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: Warn when page uses a layout without (#24116)
● kit: Support prepend option for addComponentsDir (#24309)
● kit: Allow customising logger options (#24243)
● nuxt: Allow readonly option for useCookie (#24503)
● nuxt: Add path to error.data when throwing 404 errors (#24674)
● kit: Load /module or /nuxt module subpath if it exists (#24707)
● nuxt: Layers support for spa loading template (#24709)
● nuxt: Expose refresh on islands and server components (#24261)
● nuxt: Add dedupe option for data fetching composables (#24564)
Vue Updates
🏝️ Interactive Server Components This is a highly-experimental update, but it's now possible to play around with interactive components within Nuxt server components. You'll need to enable this new feature additionally to component islands: export default…
● vite: Replace browser globals with undefined on server (#24711)
● nuxt: Allow plugins to specify dependencies (#24127)
● kit: Add new addServerScanDir composable (#24001)
● nuxt: Transform setup within defineComponent options (#24515)
● nuxt: Allow customising fallback layout (#24777)
● nuxt: useRequestHeader utility (#24781)
● nuxt: Move loading api behind hooks (#24010)
● nuxt: Add callOnce util to allow running code only once (#24787)
● nuxt: Allow client components within NuxtIsland (#22649)
● schema: Default to bundler module resolution (#22821)
● kit,nuxt,vite,webpack: Add toArray util (#24857)

πŸ”₯ Performance

● vite: Avoid duplicate resolve operation (#24736)
● nuxt: Avoid duplicate iterations over layers (#24730)
● kit: Avoid duplicate join operation (#24717)
● vite: Simplify manifest property acccess (#24715)
● nuxt: Don't dedupe fewer than two middleware/plugins (#24718)
● schema: Avoid duplicate get operations (#24734)
● schema: Use parallel promises (#24771)
● nuxt: Avoid duplicate useRuntimeConfig call (#24843)
● vite: Avoid duplicate JSON.stringify operation (#24848)

🩹 Fixes

● nuxt: Avoid recursive ssr errors (#24399)
● nuxt: Improve path resolve for import.d.ts (#24413)
● nuxt: Remove experimental reactivityTransform (vue 3.4) (#24477)
● nuxt: Ignore manifest when prerendering (#24504)
● nuxt: Don't strip literals from template in (#24511)
● vite: Use isBuiltin polyfill for greater node support (#24512)
● nuxt: Island components with number prefix (#24469)
Vue Updates
● vite: Replace browser globals with undefined on server (#24711) ● nuxt: Allow plugins to specify dependencies (#24127) ● kit: Add new addServerScanDir composable (#24001) ● nuxt: Transform setup within defineComponent options (#24515) ● nuxt: Allow customising…
● nuxt: Use consistent annotations for tree-shaking (#24514)
● nuxt: Skip prerendering all pages in hash mode (#24517)
● nuxt: Skip router middleware/redirections for islands (#24421)
● nuxt: Remove trailing slash before checking if prerendered (#24516)
● nuxt: Skip check for usage in islands (#24529)
● vite,webpack: Don't add type checker/analyzer when testing (#24608)
● nuxt: Do not try auto-install outside of a Nuxt context (#24605)
● nuxt: Merge and apply layer hooks (#24639)
● nuxt: Only add/rem...
Due to too large (in my mind) posts, I want to ask. Did this fine or you want change something. So, question:
how to best send information?
Anonymous Poll
53%
Expanded (essentially what is currently done).
13%
Shortened option (provide only a link to the changelog).
20%
I don't care. It's fine as it is.
Vue 3
v3.4.0-rc.2

#vue #vue3

Please refer to CHANGELOG.md for details.
Vue 3
v3.4.0-rc.3

#vue #vue3

Please refer to CHANGELOG.md for details.
Vuetify
v3.4.9

#vuetify

πŸš€ Features

● VCalendar: port to v3 labs (#16803) (3158d0c), closes #13469

Other Commmits

● chore(release): publish v3.4.9 (f343549)
● docs(VCalendar): setup calendar api links and fix related pages (317e662)
● docs(VCalendar): fix api types (f88b25a)
● docs(UserOneBadge): fix store checking for subscriber (7968c1e)
● docs(README.md): update content (a7046b4)
● docs(subscriptions): update page (51d4ac6)
● docs: add stripe subscriptions (#18882) (9ee68d6)
● docs(upgrade-guide): add link for vue 3 migration guide (64caa65)
● docs(DiscordDeck): update logo urls (cce9427)
● docs(date-pickers): update spec link (20d0884)
Vue 3
v3.4.0

#vue #vue3

Please refer to CHANGELOG.md for details.
πŸ”₯2
Vue Updates
oh, cool
https://github.com/vuejs/core/pull/5912#issuecomment-1748985641

Improvements for performance

vue goes brrrr vuuuuuue
πŸ”₯3
vite-plugin-vue
[email protected]

#vite #vite_plugin_vue

Please refer to CHANGELOG.md for details.
vite-plugin-vue
[email protected]

#vite #vite_plugin_vue

Please refer to CHANGELOG.md for details.
Quasar
@quasar/extras-v1.16.8

#quasar

Changes

● feat(extras): update all fonts & fix the outdated css files #16543
● feat(extras): update Google Material Symbols (font &amp; SVG) to the latest

Donations

Quasar Framework is an open-source MIT-licensed project made possible due to the generous contributions by sponsors and backers. If you are interested in supporting this project, please consider the following:

● Becoming a sponsor on Github
● One-off donation via PayPal
Quasar
quasar-v2.13.1

#quasar

New

● feat(QField): new prop -> "tag" #16548

Fixes

● fix(QInput): Add datetime-local as allowed type fix: #15929, #13241 (#16483)
● fix(ui): lang mk -- split param (#16511)
● fix(ui): q-item within QMenu should be selectable using the space key (fix: #16107) (#16364)
● fix(ui): mask: keep null value on clear #16346 (#16348)
● fix(ui): fix generic usage of QTreeNode type (fix: #15351) (#16513)
● fix(QDate): updateViewModel if navigation limitations set (fix: #16500) (#16501)
● fix(QImg): API - wrong @error param name #16545
● fix(QField): incorrect use of #16548
● fix(QField/QInput/...): wrong type ValidateProps.error / QFieldProps.error #16560
● fix(ui): types for component props where default value is null #16560

Donations

Quasar Framework is an open-source MIT-licensed project made possible due to the generous contributions by sponsors and backers. If you are interested in supporting this project, please consider the following:

● Becoming a sponsor on Github