2024年了，Nuxt3新特性，总结一波

Nuxt3.4

支持视图转换 API

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

官方文档链接：https://nuxt.com/docs/guide/going-further/experimental-features#viewtransition

对象语法 Nuxt 插件

支持对象语法的 Nuxt 插件，以便更好地控制插件顺序和更容易的挂钩注册。

export default defineNuxtPlugin({
  name: 'my-plugin',
  enforce: 'pre', // or 'post'
  async setup (nuxtApp) {
    // this is the equivalent of a normal functional plugin
  },
  hooks: {
    // You can directly register Nuxt app hooks here
    'app:created'() {
      const nuxtApp = useNuxtApp()
      //
    }
  }
})

官方文档链接：https://nuxt.com/docs/guide/directory-structure/plugins

Nuxt3.5

该版本支持Vue3.3

Nuxt3.8

内置Nuxt开发工具

Nuxt DevTools v1.0.0

链接：https://nuxt.com/blog/nuxt-devtools-v1-0

Nuxt 镜像自动安装

和一流的内置组件。，在第一次使用它们时自动安装

是Nuxt 提供的组件来处理自动图像优化。

官方文档链接： https://nuxt.com/docs/api/components/nuxt-img

Nuxt 提供了一个 组件来处理自动图像优化

官方文档链接： https://nuxt.com/docs/api/components/nuxt-picture

NuxtLink默认值

可以直接在文件中自定义内置选项

export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        activeClass: 'nuxt-link-active',
        trailingSlash: 'append'
      }
    }
  }
})

类型导入更改

Nuxt3.7版本中默认打开verbatimModuleSyntax

- import { someFunction, SomeOptions } from 'some-library'
+ import { someFunction } from 'some-library'
+ import type { SomeOptions } from 'some-library'

您可以设置以下配置，关闭verbatimModuleSyntax

export default defineNuxtConfig({
  typescript: {
    tsConfig: {
      compilerOptions: {
        verbatimModuleSyntax: false
      }
    }
  }
})

Nuxt 3.9

该版本支持 Vue 3.4

1.在 callOnce 中运行单个事件

有时，您只想运行代码一次，无论加载页面多少次，且如果代码在服务器上运行，您不想在客户端上再次运行它。

为此,有一个新的工具：callOnce

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

参考链接：https://nuxt.com/docs/api/utils/call-once

参考链接

https://nuxt.com/blog/v3-4

https://nuxt.com/blog/v3-5

https://nuxt.com/blog/v3-8

https://nuxt.com/blog