Nuxt3.4
支持视图转换 API
export default defineNuxtConfig({
experimental: {
viewTransition: true
}
})
官方文档链接：nuxt.com/docs/guide/…
对象语法 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()
//
}
}
})
官方文档链接：nuxt.com/docs/guide/…
Nuxt3.5
该版本支持Vue3.3
Nuxt3.8
内置Nuxt开发工具
Nuxt DevTools v1.0.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>
