【Nuxt3】内置组件介绍

简言

介绍下nuxt3的内置组件用法。

ClientOnly

使用 <ClientOnly> 组件仅在客户端渲染组件。
属性：

placeholderTag | fallbackTag — 指定要在服务器端呈现的标记。
placeholder | fallback — 指定要在服务器端渲染的内容，并在浏览器挂载 <ClientOnly> 之前显示。

示例：

<template><div><Sidebar /><!-- This renders the "span" element on the server side --><ClientOnly fallbackTag="span"><!-- this component will only be rendered on client side --><Comments /><template #fallback><!-- this will be rendered on server side --><p>Loading comments...</p></template></ClientOnly></div>
</template>

DevOnly

使用 <DevOnly> 组件，仅在开发过程中渲染组件。
Nuxt 提供了 <DevOnly> 组件，用于仅在开发过程中呈现组件。

这些内容不会包含在生产构建中，它有一个fallback插槽可以用于在生产环境替换devOnly的内容。

这在开发时显示辅助开发工具比较有用

<template><div><Sidebar /><DevOnly><!-- this component will only be rendered during development --><LazyDebugBar /><!-- be sure to test these using `nuxt preview` --><template #fallback><div><!-- empty div for flex.justify-between --></div></template></DevOnly></div>
</template>

NuxtClientFallback

Nuxt 提供了 <NuxtClientFallback> 组件，用于在其任何子组件触发 SSR 中的错误时在客户端呈现其内容。

这个是实验性的，需要在nuxt.config.ts配置才可开启

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

slots

#fallback：指定插槽渲染失败时在服务器端显示的内容。

示例

  <template><!-- render <span>Hello world</span> server-side if the default slot fails to render --><NuxtClientFallback fallback-tag="span" fallback="Hello world"><BrokeInSsr /></NuxtClientFallback></template>

NuxtPage

需要使用 <NuxtPage> 组件来显示位于 pages/ 目录中的页面。
NuxtPage 是 Nuxt 的内置组件。它允许你显示位于 pages/ 目录中的顶层或嵌套页面。

它相当于vue-router的routerview，并且接收相同的name和route属性

属性

name — 会告诉 RouterView 渲染匹配路由记录组件选项中对应名称的组件。
route — 已解决所有组件的路由位置。
pageKey — 渲染 NuxtPage 组件的key。
transition — 为使用 NuxtPage 组件渲染的所有页面定义全局过渡效果。
keepalive — 控制使用 NuxtPage 组件渲染的页面的状态保存。

Nuxt 通过扫描和渲染在 /pages 目录中找到的所有 Vue 组件文件，自动解析名称和路由。

示例

一般情况直接使用<NuxtPage />就好。

<template><div><NuxtPage /></div>
</template>
<script lang="ts" setup></script>

NuxtLayout

用于在页面使用layouts目录下的布局。
<NuxtLayout /> 通过 <slot /> 渲染传入内容，然后将其包裹在 Vue 的 <Transition /> 组件周围，以激活布局转换。为使其达到预期效果，建议 <NuxtLayout /> 不是页面组件的根元素。

<template>
<div><NuxtLayout>some page content</NuxtLayout></div>
</template>

默认情况下，他使用的是layouts目录下的default布局。

属性

name — 指定要渲染的布局名称，可以是字符串、反应式引用或计算属性。该名称必须与 layouts/ 目录中相应布局文件的名称一致。

示例

default布局

<template><div class="default"><div><h1>这是default布局</h1></div><slot /><slot name="footer"></slot></div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
</script>
<style lang="scss" scoped></style>

使用：

<template><div><NuxtLoadingIndicator color="green" /><NuxtLayout><NuxtPage /><template #footer><div>底部内容</div></template></NuxtLayout></div>
</template>
<script lang="ts" setup></script>

在这里插入图片描述

NuxtLink

Nuxt 提供了 <NuxtLink> 组件，用于处理应用程序中的各种链接。

是 Vue Router 的 <RouterLink> 组件和 HTML 的 <a> 标记的直接替代品。它能智能判断链接是内部链接还是外部链接，并通过可用的优化（预取、默认属性等）进行相应的渲染。

属性

在不使用外部链接时，<NuxtLink> 支持所有 Vue 路由器的 RouterLink 属性：

to — 任何 URL 或 Vue 路由器中的路由位置对象。
custom — 自定义导航工作方式，与vue-router的custom属性相同。
exactActiveClass ：指定点击后的类样式。其作用与 Vue 路由器的 exact-active-class prop 在内部链接上的作用相同。默认为 Vue 路由器的默认 “router-link-exact-active”）。
replace — 与 Vue Router 在内部链接上的replace属性功能相同。
ariaCurrentValue — 与 Vue Router 的 aria-current-value prop 在内部链接上的作用相同.
activeClass — 其作用与 Vue Router 的 active-class prop 在内部链接上的作用相同。默认值为 Vue 路由器的默认值（"router-link-active）。
href — to 的别名。如果与 to 一起使用，href 将被忽略。
noRel — 如果设置为 true，则不会在链接中添加 rel 属性。
external — 强制链接以 a 标记而不是 Vue Router RouterLink 的形式呈现。
prefetch — 启用后，将预取视口中链接的中间件、布局和有效载荷（使用 payloadExtraction 时）。由实验性的 crossOriginPrefetch 配置使用。
noPrefetch — 禁用预取。
prefetchedClass — 用于预取链接的类。
target — 应用于链接的目标属性值。
rel — 用于链接的 rel 属性值。外部链接默认为 “noopener noreferrer”。

示例

<template><NuxtLink to="https://twitter.com/nuxt_js" target="_blank">Nuxt Twitter</NuxtLink><!-- <a href="https://twitter.com/nuxt_js" target="_blank" rel="noopener noreferrer">...</a> --><NuxtLink to="https://discord.nuxtjs.org" target="_blank" rel="noopener">Nuxt Discord</NuxtLink><!-- <a href="https://discord.nuxtjs.org" target="_blank" rel="noopener">...</a> --><NuxtLink to="https://github.com/nuxt" no-rel>Nuxt GitHub</NuxtLink><!-- <a href="https://github.com/nuxt">...</a> --><NuxtLink to="/contact" target="_blank">Contact page opens in another tab</NuxtLink><!-- <a href="/contact" target="_blank" rel="noopener noreferrer">...</a> -->
</template>

NuxtLoadingIndicator

在页面导航之间显示进度条。

属性

color — 加载条的颜色。可将其设置为 false，以关闭明确的颜色样式。
height — 加载条高度，默认3px。
duration — 加载条的持续时间，毫秒（默认为 2000）。
throttle — 限制出现和隐藏的时间，毫秒数（默认 200）。
estimatedProgress — 默认情况下，Nuxt 会在接近 100% 时退出。你可以提供一个自定义函数来自定义进度估算，这是一个接收加载条（上图）持续时间和已用时间的函数。它应该返回一个介于 0 和 100 之间的值。

您可以使用 useLoadingIndicator 可组合挂钩到底层指标实例，这样就可以自己触发开始/结束事件。

示例

    <NuxtLoadingIndicator color="green" />

NuxtErrorBoundary

<NuxtErrorBoundary> 组件处理在其默认槽中发生的客户端错误。

slots

#error：指定出错时要显示的后备内容。

示例

  <template><NuxtErrorBoundary><!-- ... --><template #error="{ error }"><p>An error occurred: {{ error }}</p></template></NuxtErrorBoundary></template>

NuxtWelcome

<NuxtWelcome> 组件用于在使用启动模板制作的新项目中向用户致意。
它包括 Nuxt 文档、源代码和社交媒体账户的链接。

没屁用

示例

<template><NuxtWelcome />
</template>

NuxtIsland

Nuxt 提供了 <NuxtIsland> 组件，用于呈现非交互式组件，无需任何客户端 JS。
在渲染island组件时，island组件的内容是静态的，因此客户端无需下载 JS。
更改island组件道具会触发island组件的重新获取，从而再次重新渲染。

仅服务器组件在引擎盖下使用 <NuxtIsland>

这是一个提高性能的组件，如果你的组件内容只需要在服务端加载运行一次就行，然后在客户端只显示，不做后续交互，即可使用它。

它是实验性的组件 ,需要以下配置

// nuxt.config.ts
export default defineNuxtConfig({experimental: {componentIslands: true}
})

属性

name — 要渲染的组件名称。
lazy — 使组件不阻塞。
props — 要发送给组件进行渲染的属性。
source — 调用island 渲染的远程源。
dangerouslyLoadClientComponents — 需要从远程源加载组件。

强烈不建议启用危险加载客户端组件（dangerouslyLoadClientComponents），因为远程服务器的 javascript 不可信。

slots

如果声明了插槽，插槽可以传递给岛组件。
由于提供插槽的是父组件，因此每个插槽都是交互式的。

#fallback：指定在岛屿加载前（如果组件是懒惰的）或 NuxtIsland 无法获取组件时要渲染的内容。

示例

<template><NuxtIsland name="Hello" />
</template>

NuxtImg

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

<NuxtImg> 是本地标签的直接替代品。

使用内置提供程序优化本地和远程图像
将 src 转换为提供程序优化的 URL
根据宽度和高度自动调整图片大小
在提供尺寸选项时生成响应尺寸
支持本地懒加载和其他 <img> 属性

详细内容请参考：NuxtImage

使用

要使用 <NuxtImg>，必须安装并启用 Nuxt Image 模块：

npx nuxi@latest module add image

<NuxtImg> 可直接输出原生 img 标记（周围没有任何封装）。使用它就像使用标签一样：

<NuxtImg src="/nuxt-icon.png" />

NuxtPicture

Nuxt 提供了一个 <NuxtPicture> 组件来处理自动图像优化。
<NuxtPicture> 是原生 <picture> 标签的直接替代品。
<NuxtPicture> 的用法与 <NuxtImg> 几乎相同，但它也允许在可能的情况下提供 webp 等现代格式。

要使用 <NuxtPicture>，必须安装并启用 Nuxt Image 模块：

npx nuxi@latest module add image

Teleport

<Teleport> 组件可将组件传送到 DOM 中的不同位置。
和vue的teleport组件一样。

示例

<template><button @click="open = true">Open Modal</button><Teleport to="body"><div v-if="open" class="modal"><p>Hello from the modal!</p><button @click="open = false">Close</button></div></Teleport>
</template>

<template><ClientOnly><Teleport to="#some-selector"><!-- content --></Teleport></ClientOnly>
</template>

结语

结束了。