nuxt.js 相关问题

Nuxt3：如何在 onMounted() 中使用 useFetch()？

此代码不具有反应性。 复制useFetch()的返回值比较麻烦。 如何使用解构赋值语法来启用反应性？ <p>此代码不具备反应性。</p> <p>复制<pre><code>useFetch()</code></pre>的返回值很麻烦。</p> <p>如何使用解构赋值语法来启用反应性？</p> <pre><code>&lt;script lang=&#34;ts&#34; setup&gt; const a = ref&lt;boolean&gt;(false) const b = ref&lt;FetchError|null&gt;() const c = ref&lt;any[]&gt;([]) onMounted(async () =&gt; { const { pending: a, error: b, data: c} = toRefs( await useLazyFetch&lt;any[]&gt;( &#34;http://localhost:3178/posts&#34; ) ) }) &lt;/script&gt; &lt;template&gt; &lt;div&gt;{{ a }}&lt;/div&gt; &lt;div&gt;{{ b }}&lt;/div&gt; &lt;div&gt;{{ c }}&lt;/div&gt; &lt;/template&gt; </code></pre> </question> <answer tick="false" vote="0"> <p>有一个像<a href="https://stackoverflow.com/questions/70464990/nuxt3-useasyncdata-not-working-onmounted-lifecycle-hook">this</a>这样的解决方案 我希望这会有所帮助。</p> <p>它对我有用。</p> </answer> <answer tick="false" vote="0"> <p>我建议你不要这样做。根据官方 <a href="https://nuxt.com/docs/getting-started/data-fetching#fetch" rel="nofollow noreferrer">docs</a> 的建议，您应该使用 <pre><code>$fetch</code></pre> 进行客户端（基于事件）交互。</p> <p>这样的东西会更合适：</p> <pre><code>const pending = ref(false); const data = ref(null); onMounted(async () =&gt; { pending.value = true; try { data.value = $fetch(&#34;http://localhost:3178/posts&#34;); } catch (e) { // do what you want with the error } pending.value = false; }) </code></pre> </answer> </body></html>

具有动态参数的 Nuxt 3 子路由未获得活动类

我有以下文件夹结构。以下几页很重要 /workshops 和 /workshops/workshop-1。 我现在遇到的问题是我的活动链接适用于 /workshops，但不适用于...

优化 Nuxt 3 中的背景图像

我正在开发一个 Nuxt.js 应用程序，我需要为 设置装饰背景图像。我更喜欢使用背景图像作为装饰元素，因为它在语义上更合适...... 我正在开发一个 Nuxt.js 应用程序，我需要为 <div> 设置装饰背景图像。我更喜欢使用背景图像作为装饰元素，因为它在语义上更合适，而使用 <img> 标签作为内容图像。 <NuxtImg> 会产生优化的 <img>，但我想优化背景图像。 您可以使用 useImage() 生成辅助函数，如 文档中所述 const img = useImage() const backgroundStyles = computed(() => { const imgUrl = img('https://github.com/nuxt.png', { width: 100 }) return { backgroundImage: `url('${imgUrl}')` } })

如何用nuxt3实现auth0

我正在尝试将 auth0 添加到我的 nuxt3 应用程序中，但我在如何处理它时遇到了困难。 auth-nuxt 模块仍然不适用于 nuxt3，并且 auth0-spa-js 无法使其与 SSR 一起使用...

Nuxt SSG：路由更改后页面没有立即包含所有内容

我有一个完整的静态 NUXT 应用程序，因此我希望页面上的所有内容在路由更改后立即准备就绪。 我发现路线变更和...

如何在 vue 组件中触发自定义 CSS 的热重载？

<template> <div class="binav" ref="binav"> <div class="nav-content" ref="content"> <component :is="item" v-for="(item, index) in slotItems" :class="getClass(index)" :key="index" /> </div> </div> </template> <script setup> const slots = useSlots() const slotItems = ref([]) const content = ref(null) const binav = ref(null) onMounted(() => { slotItems.value = slots.default ? slots.default() : [] const contentWidth = getComputedStyle(binav.value).getPropertyValue('--content-width') content.value.style.maxWidth = contentWidth }) function getClass(index) { return { 'left': index === 0, 'right': index === 1, } } </script> <style scoped lang="sass"> .binav display: flex align-items: center user-select: none width: 100% .nav-content display: flex justify-content: space-between align-items: center // custom max-width: 100% width: 100% margin-inline: auto .left justify-content: flex-start .right justify-content: flex-end </style> 这里我有一个自定义导航组件。它将内容分成左右两个 div。它在安装时检查自定义 CSS 标签并使用它们来居中对齐导航。尽管当我对自定义 CSS 标签进行更改时，它不会触发 Vue 热重载。我尝试在导航参考的各个部分添加观察者，但我找不到任何有效的方法。我有许多组件使用此功能，并希望它们像传统 CSS 一样触发热重载。 我知道这是可能的，但我不太熟悉 Vue 的反应系统。我想我可以在某处观看一些代理，但不知道它是什么？有人知道该怎么做吗？ 我尝试添加观察者并在我设置的 binav 引用上使用“更改”事件侦听器。 热重载由您的构建工具（例如 Vite 或 Vue CLI）处理。这不是 Vue 本身的功能。如果您还没有构建工具，我会感到惊讶，但如果没有，这里有一些资源可以帮助您将 Vite 添加到现有的 vue 项目中，例如这个。 这里是 来自 Vite 的 HMR 文档。一旦集成到您的项目中，它将自动受到支持。

Nuxt 3 HMR 模块未重新加载更改

我有 nuxt 3 项目并安装了几个软件包。 hmr 工作正常..它突然停止了，不知道为什么。 控制台中没有错误。 cmd 显示文件正在更新...

useAsyncData 状态返回空闲

const { 数据、状态、错误、刷新、清除 } = 等待 useAsyncData( '活动'， () => $fetch(`${$request.baseUrl}/cs/v1/campaign/find/${route.params.campaign}?mode=${route.query.mode || ''}...

使用Nuxt的useHead和visibilitychange事件

在每个页面上我使用 useHead({title: ""}); 设置标题。 在layout/default.vue 文件中，我添加了： 使用头（{ 标题模板：标题=> { let titleDefault = '公司后缀'; 如果（标题...

Nuxt 3 应用程序部署到 Azure。 nuxt.config.ts 的硝基部分中忽略环境变量

我发现部署到 Azure 的 Nuxt 3 应用程序忽略 nuxt.config.ts 中的环境变量。 这是我在本地的： 硝基：{ 贮存： { 雷迪斯：{ 驱动程序：'redis'， ...

使用 Nuxt 3 时，默认布局未出现在 error.vue 中

发生了什么事？ 我正在创建一个 ~/error.vue 文件来显示自定义错误页面。 我需要应用默认布局，因为我希望应用程序的设计尽可能最统一。 默认

Vercel 上的 Nuxt3 部署错误 404 未找到

我正在尝试将 nuxt3 应用程序部署到 vercel 。 我也获得了构建成功。 但一旦部署完成，就会出现 404 错误页面。 nuxt.config.ts 导出默认的defineNuxtConfig({ SSR：假， 目标：'

Nuxt.js 表单随每次数据更改而提交

我有这个表格： 我有这个表格： <template> <div class="flex flex-col mt-[5rem] gap-4 p-4 items-center max-w-4xl mx-auto"> <form id="inquiry" class="flex flex-col gap-4 w-full" @submit.prevent="submitHandler"> <label for="name">Name</label> <input class="input" type="text" name="name" v-model="formData.name" @input="saveFormData"> <label for="email">Email</label> <input class="input" type="email" name="email" v-model="formData.email" @input="saveFormData"> <label for="message">Message</label> <textarea class="input" name="message" id="message" cols="30" rows="10" v-model="formData.message" @input="saveFormData"></textarea> <h2 v-if="message">{{ message }}</h2> <button type="submit" class="btn" :disabled="message === 'Loading...'">Submit</button> </form> </div> </template> <script setup lang="ts"> const message = ref(''); const formData = reactive({ name: '', email: '', message: '' }); const loadFormData = () => { const savedData = localStorage.getItem('inquiryFormData'); if (savedData) { const parsedData = JSON.parse(savedData); formData.name = parsedData.name || ''; formData.email = parsedData.email || ''; formData.message = parsedData.message || ''; } }; const saveFormData = () => { localStorage.setItem('inquiryFormData', JSON.stringify(formData)); }; const clearFormData = () => { localStorage.removeItem('inquiryFormData'); }; onMounted(() => { loadFormData(); }); const submitHandler = async () => { if (message.value === 'Loading...') return; message.value = 'Loading...'; const { data: res } = await useFetch("***", { method: "POST", query: { websiteId: "***", formGroupId: "***" }, body: formData }); const responseMessage = (res.value as any).message; message.value = responseMessage === "success" ? "Thank you for your inquiry! We will reach out to you shortly." : "Something went wrong. Please try again later."; formData.name = ''; formData.email = ''; formData.message = ''; clearFormData(); }; </script> 提交后，将发送第二次提交，其中字段为空。如果我不清除字段，则对字段的每次更改都会触发另一次提交。处理程序似乎正在监视字段变化。当我每次调用处理程序时都记录时，它只被调用一次，但数据会发送多次。 useFetch自动监视参数变化。这就是为什么当表单字段被清除时，会发生另一个触发器。 解决方案只需在 watch: false 选项中添加 useFetch 即可。 文档

在 Nuxt 3 中升级 @nuxt/image 模块的问题

我在 Nuxt 3 项目中从 @nuxt/image-edge 升级到最新稳定的 @nuxt/image 时遇到问题。我当前的设置包括： • Nuxt版本：“^3.1.1” • Vue 版本...

Nuxt.js localhost 自动重定向到 /login，导致 404 错误

我创建了一个新的Nuxt项目并想要使用pages/目录，因此我删除了app.vue，因为它不再需要了。到目前为止， /pages 目录仅包含带有 mi... 的 index.vue 文件。

将函数从父级传递给子级，我也可以在 Vue/Nuxt 3 Composition API 中传递参数

将函数从父级传递给子级，我也可以在 Vue/Nuxt 3 Composition API 中传递参数 父组件 将函数从父级传递给子级，我也可以在 Vue/Nuxt 3 Composition API 中传递参数 父组件 </script setup> <template> <div> <ChildComponent :handleButtonClick="handleButtonClick" /> </div> </template> <script setup> import ChildComponent from './ChildComponent.vue' const handleButtonClick = (data) => { console.log('Button clicked in child component',data) } </script> 子组件 <template> <button @click="handleButtonClick(1)">Click Me</button> </template> <script setup> import { defineProps } from 'vue' const props = defineProps({ handleButtonClick: { type: Function, required: true } }) </script> 在 child 中调用 fn 时遇到错误 TypeError：_ctx.handleButtonClick 不是函数 我相信你必须在 handleButtonClick 前面加上 props.，如下所示： <template> <button @click="props.handleButtonClick(1)">Click Me</button> </template> // remaining code as from question

Nuxt - 组件已安装，请使用 $fetch 代替

我有这个代码 const redirectToPayment = async () => { const { 数据 } = 等待 useAsyncQuery( 创建CheckoutMutation， {variantId：product.value.productByHandle.variants.edges[0].node...

dontenv.config() 给出错误 process.cwd 不是函数

我正在尝试将 Drizzle 集成到 Nuxt 3 中。 在 /server/db/index.ts 中我有以下内容 从'@vercel/postgres'导入{sql}； 从 'drizzle-orm/vercel-postgres' 导入 { drizzle }； 进口多腾...

如果从 onMounted 钩子引用，Pinia 存储包含空值

我遇到一个问题，如果我尝试通过 onMounted 挂钩访问 Pinia 存储，则其每个状态属性将包含 null。实际情况比这稍微复杂一些。这是调用堆栈

Nuxt 3 部署到托管

我在 https://nuxt-deploy.mpetrosyan.com 托管了我的 Nuxt 3 项目。从主页导航到帖子页面时，一切正常。但是，如果我在发帖时刷新页面（例如 htt...