開源日報每天推薦一個 GitHub 優質開源項目和一篇精選英文科技或編程文章原文，堅持閱讀《開源日報》，保持每日學習的好習慣。

2024年1月17日，開源日報第1077期：
今日推薦開源項目：《chatgpt-web-midjourney-proxy》
今日推薦英文原文：《Nuxt 3.9》

開源項目

今日推薦開源項目：《chatgpt-web-midjourney-proxy 》傳送門：項目鏈接

推薦理由： chatgpt-web-midjourney-proxy chatgpt web, midjourney, gpts,tts, whisper 一套ui全搞定

官網直達：vercel.ddaiai.com

英文原文

今日推薦英文原文：Nuxt 3.9

推薦理由：Nuxt 3.9發布，引入了Vite 5、互動式伺服器組件、新的組合式API等功能, 支持Vite 5和Rollup 4，需要檢查vite插件的兼容性，使用新的AST-aware 'define'進行自動伺服器優化，同時新增鉤子和工具，如Granular Loading API和callOnce

Nuxt 3.9

Nuxt 3.9 is out - a Christmas gift from the Nuxt team bringing Vite 5, interactive server components, new composables, a new loading API and more.

A very merry Christmas to you and yours from all Nuxters involved in this release! 🎁🎄

We have lots of features packed into v3.9 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.

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:

package.json

{
  "dependencies": {
    "nuxt": "3.9.0",
    "vue": "3.4.0-rc.1",
    "vue-router": "latest"
  }
}

🏝️ 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:

nuxt.config.ts

export default defineNuxtConfig({
  experimental: {
    componentIslands: {
      selectiveClient: true
    }
  }
})

Now, within a server component, you can specify components to hydrate by using the nuxt-client directive:

components/SomeComponent.server.vue

<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:

app.vue

<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:

nuxt.config.ts

export default defineNuxtConfig({
  hooks: {
    'vite:extendConfig' (config) {
      delete config.define!.document
    }
  }
})

🚦 Granular Loading API

We now have a new hook-based system for [](https://nuxt.com/docs/api/components/nuxt-loading-indicator), 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).

app.vue

<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 Docs > API > Utils > Call Once.

🚨 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

Full Release Notes

Read the full release notes of Nuxt v3.9.0.

Thank you for reading this far! We hope you enjoy the new release. Please do let us know if you have any feedback or issues.

Happy Nuxting ✨

下載開源日報APP：https://openingsource.org/2579/
加入我們：https://openingsource.org/about/join/
關注我們：https://openingsource.org/about/love/

開源日報第1077期：一套ui全搞定：《chatgpt-web-midjourney-proxy》