Nuxt.js是一个用于创建Vue.js应用程序的框架，您可以选择Universal，Static Generated或Single Page应用程序（受Next.js启发）
Nuxt 3 有没有办法在服务器端使用 cookie？ 例如，我想在API中设置cookie，然后在中间件中读取其数据： // ~/server/api/testApi.ts 导出默认的defineEventHandler...
我正在制作一个简单的“电子邮件确认”页面。 它从 URL 获取确认密钥，向 API 发送 POST 请求，该请求返回 true 或不返回任何内容。 如果密钥正确，API 会将其从数据库中删除，然后...
嗯，我从 nuxt 开始，我有以下路线： /家 /仪表板 /登录 我想保护 /dashboard，但仅限于使用 localStorage 中的令牌登录的用户。 最简单的方法我
如何使用useAsyncData和Nuxt Content获取和转换数据？
我在项目中使用Nuxt和Nuxt Content，我想显示csv文件的内容。 根据文档，我使用以下代码： const { 数据 } = 等待 useAsyncData 我在项目中使用Nuxt和Nuxt Content，我想显示csv文件的内容。 根据文档，我使用以下代码： const { data } = await useAsyncData<any | Concert[]>('concerts', () => queryContent('/concerts').findOne()) 到目前为止，我没有遇到任何问题。但是一旦我获得了数据，我需要在显示它之前将其用于两个函数。我尝试了很多方法，比如在 useAsyncData 可组合项上使用转换选项，但我没能成功，最后我想出了这个解决方案： const sorted = computed(() => data.value?.body ? sortConcerts(data.value.body) : null) const concerts = computed(() => sorted.value ? formatConcerts(sorted.value, en) : null) 只有当我将内容包装在组件中时，这才适用于开发。 但是当我部署应用程序时（在netlify上使用“nuxt生成”），我只在第一次访问路线时看到数据。第二次，我的列表是空的。 我觉得我没有做正确的事，但我找不到解决办法。有人有解决方案来实现我想要的吗？ 非常感谢！ 你可以试试这个 <script setup> const sorted = ref() const concerts = ref() const { data } = await useAsyncData<any | Concert[]>('concerts', () => queryContent('/concerts').findOne()) if (data.value) { sorted.value = data.value?.body concerts.value = formatConcerts(sorted.value, en) } </script>
我正在开发一个显示文章的 Nuxt 3 应用程序。它是现有 React 应用程序的新版本。在旧的 React 应用程序中，文章的 url 格式是 www.mysite.com/id-of-categories/title-of-articl...
在 npm 上发布 Nuxt 3 应用程序/组件，无需 Nuxt 即可由普通 Vue 3 使用
我发布vue组件的常用方法是基于这个视频。对于 Nuxt 3，工作流程要简单得多，几乎不需要配置任何东西，只需 npmpublish，然后安装 packa...
渲染 Editor.js 时在 Nuxt 中出现 500 Element is not Defined 错误
我正在尝试在 Nuxt 项目中使用 Editor.js 创建编辑器。 似乎当我渲染页面时 editor.js 还没有准备好。 从 '@editorjs/editorjs' 导入 EditorJS； 接口 IEditor {
大家好，我正在尝试在 Nuxt.js 中创建动态“面包屑”，有没有人有一个工作示例，它应该如何工作 我尝试创建一个简单的示例，但它没有按预期工作，
如何将 spline3D 与 Vue 或 Nuxt 一起使用？
我对vue还是个新手，我一直在尝试使用spline 3d制作一个交互式网站。当谈到 React 时，splinetool 有它的用于 ReactJS 的 owm 库。但我找不到 Vue 的。我已经三...
我有一个简单的 Vue 登录/注册表单。 我为占位符准备了有趣的虚拟数据，因此每次页面重新加载时，它都会以我的表单显示随机人员数据： <question vote="1"> <p>我有一个简单的 Vue 登录/注册表单。 我为占位符准备了有趣的虚拟数据，因此每次页面重新加载时，它都会以我的表单显示随机人员数据：</p> <pre><code><script setup lang="ts"> const isLogin = ref(true); const dummyData = [ ['Euclid', '<a href="/cdn-cgi/l/email-protection" data-cfemail="f19484929d9895b1968394949294df9e9d95">[email protected]</a>'], ['Gauss', '<a href="/cdn-cgi/l/email-protection" data-cfemail="442325313737042925302c6a2f2d2a23">[email protected]</a>'], ['Einstein', '<a href="/cdn-cgi/l/email-protection" data-cfemail="02636e606770764270676e63766b74672c726a7b71">[email protected]</a>'], ]; const cDummy = dummyData[Math.floor(Math.random()*dummyData.length)]; </script> </code></pre> <p>然后我在模板中使用<pre><code>cDummy</code></pre> const 中的数据：</p> <pre><code><template> <label v-if="!isLogin"> <div>Name</div> <input type="text" :placeholder="cDummy[0]" required> </label> <label> <div>Email</div> <input type="email" :placeholder="cDummy[1]" required> </label> <a @click="isLogin = !isLogin">{{ modeLabels.switchText }}</a> </template> </code></pre> <p>问题是当我更改反应式 <pre><code>isLogin</code></pre> 变量时，新添加的输入 <pre><code>Name</code></pre> 字段占位符名称有时不适合虚拟电子邮件。例如，邮件是<pre><code><a href="/cdn-cgi/l/email-protection" data-cfemail="fc9b9d898f8fbc919d8894d29795929b">[email protected]</a></code></pre>，添加的名称是<pre><code>Euclid</code></pre>等等。</p> <p>为什么会这样？</p> </question> <answer tick="false" vote="1"> <p>事实证明，Nuxt 3 执行其服务器端渲染魔法，并使用在服务器上生成的自己的 <pre><code>cDummy</code></pre> 值来编译模板的静态部分。模板的另一部分是在客户端生成的，它有自己的<pre><code>cDummy</code></pre>。这就是数据不同的原因。</p> <p>为了解决这个问题，我用 <pre><code>input</code></pre> 标签包裹了两个 <pre><code><ClientOnly></code></pre> 标签。</p> <p>非常感谢<a href="https://stackoverflow.com/users/15261914/darryl-noakes">@DarrylNoakes</a>和<a href="https://stackoverflow.com/users/13278223/raphael-rlt">@RaphaelRlt</a>！</p> </answer> </body></html>
我正在使用 Nuxt 3 和 Electron JS，但为什么构建应用程序会导致启动时出现白屏？
大家好， 我正在尝试从我的 ElectronJS/Nuxt 3 应用程序中构建一个版本。我只看到一个白色的屏幕。我已经尝试过 SO 中提到的 hashmode 选项，但它仍然不起作用。我该怎么办...
我正在从 Nuxt3 中的 API 获取数据。我正在使用打字稿，我希望定义我将获得的数据类型。我如何指定这一点？ 接口API...</desc> <question vote="15"> <p>我正在从 Nuxt3 中的 API 获取数据。我正在使用打字稿，我希望定义我将获得的数据类型。我该如何指定这个？</p> <pre><code><script lang="ts" setup> interface APIBody { /* properties defined here */ } const {data} = await useFetch("api_url here") </script> <template> {{ data.name.officialName }} <template> </code></pre> <p>我在显示 <pre><code>template</code></pre><pre> 的 </pre><code>data.name.officialName</code></p> 处收到错误 <blockquote> <p>类型“never”上不存在属性“name”</p> </blockquote> <p>但是，在浏览器中运行代码时，网站运行良好。</p> <p><strong>编辑</strong> 我尝试了以下代码，但现在收到了不同的错误。</p> <pre><code><script lang="ts" setup> interface APIBody { /* properties defined here */ } const typedData = ref<APIBody[]>() const {data} = await useFetch("api_url here") typedData.value = data as APIBody[] // -> error here </script> <template> {{ data.name.officialName }} <template> </code></pre> <p>本例的错误是：</p> <blockquote> <p>将“Ref<Pick<unknown, never>>”类型转换为“APIBody[]”类型可能是一个错误，因为两种类型都没有与另一种类型充分重叠。</p> </blockquote> </question> <answer tick="false" vote="25"> <p>您可以给<pre><code>useFetch</code></pre>一个类型来定义返回类型</p> <p>喜欢：</p> <pre><code> interface APIBody { /* properties defined here */ } const {data} = await useFetch<APIBody>("api_url here") </code></pre> </answer> <answer tick="false" vote="0"> <p>如果我们还需要基于 <pre><code>pick</code></pre> 中的类型，您可以检查此可组合项：</p> <pre><code>type SomeProps = { prop1: string; prop2: string; }; export function usePropsApi() { const { public: { api } } = useRuntimeConfig(); return { read: <T extends keyof SomeProps>({ pick = [], }: { pick?: Array<T>; } = {}) => useFetch<Pick<SomeProps, T>>('/props', { baseURL: api, ...(pick.length && pick), }), }; } </code></pre> <p>并且像这样使用，来自 <pre><code>pick[]</code></pre> 的其他道具将从类型中排除：</p> <pre><code>const { data } = await usePropsApi().read({ pick: ['prop1'], }); console.log('data.value: ', data.value?.prop1); console.log('data.value: ', data.value?.prop2); // Property 'prop2' does not exist on type ... </code></pre> </answer> <answer tick="false" vote="0"> <p>这是我在 Nuxt 3.9.0 中的工作示例：</p> <pre><code>import type { AsyncData } from 'nuxt/app'; import type { FetchError } from 'ofetch'; interface Body { key: string }; const { data: { value: { body } }, error } = await useFetch('/api/test', { method: 'post', body: { key: 'value', } }) as AsyncData<{ body: Body }, FetchError>; // now you're getting body's properties without ts-errors console.log(key); </code></pre> </answer> </body></html>
我花了几天时间试图找出为什么我的后端无法在我的应用程序的在线版本上运行。我创建了一个 Nuxt 项目，它使用 Prisma 作为一个非常小且简单的数据库。 我...
我在应用程序中的查询中使用 Laravel 的分页功能，该功能作为 JSON 响应返回到我的前端（它是 Laravel Rest API） /** * 应用 */ 公共职能
我对 momentjs 和 NuxtJS 有这个问题 我创建了带有 javascript 的可组合项，以获取世界不同地方的当前时间。 比我装箱了一个组件......
我正在使用 Nuxt 3 并且有一个像这样的 TypeError ： 未捕获的类型错误：n2 不是函数 我有一个按钮使用@click.prevent 调用我的函数toggleSelectRow 这是函数： c...
Nuxt：在带有“<script setup>”的组件上使用“v-model”会破坏常规的“<script>”
在 Nuxt3 项目中，我在组件上使用 v-model。根据 Vue 文档，这是如何做到的： 在父组件中： 在 Nuxt3 项目中，我在组件上使用 v-model。根据 Vue 文档，这是如何做到的： 在父组件中： <MyInput v-model="myData" placeholder="My placeholder" /> 在子组件中 <template> <div class="my-input"> <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> </div> </template> <script setup> defineProps(['modelValue']) defineEmits(['update:modelValue']) </script> <script> export default { props: { placeholder: { type: String }, }, mounted() { console.log(this.placeholder) } } </script> Vue 文档说我应该能够在同一个文件中包含 <script setup> 和 <script> 标签。然而，它会导致破坏性错误。只要 <script setup> 标记仍然存在，控制台日志就会返回 undefined。如果我删除 <script setup> 标签，控制台日志将返回 My placeholder。也许这种方法在 Nuxt 中不起作用？有什么想法吗？ 您可以直接将属性绑定到输入： <template> <div class="my-input"> <input v-bind="$attrs" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> </div> </template>
根据 Nuxt 3 中的环境使用 .env 中不同的 api url
我正在尝试对阶段（开发）和生产环境使用不同的 api url 我已经在 nuxt.config.js 中定义了 url，如下所示 从“redirect-ssl”导入redirectSSL； 常量
我有示例后端，它发出 JWT 令牌，但它接受查询字符串中的用户名和密码。 我正在尝试使用 Nuxt JS 身份验证中间件，如何在 querystri 中发送用户名和密码...
Nuxtjs 无法从运行在不同端口上的 Express 后端加载数据
我的 NUXT SSR 网站 https://tejasjadhav2001.tech 托管在 https://34.93.29.137:3333 ，用于 REST 后端的 Expressjs 服务器托管在 https://34.93.29.137:3000 https://34.93.29.137:3333 是亲...