nuxt.js 相关问题

如何使用@nuxtjs/[email protected]修复Nuxt.js 3安装问题？

我正在尝试运行从 Envato 市场购买的 Nuxt.js 3 模板，但是当我运行 npm install 时，出现以下错误。 npm 错误！代码 ERESOLVE npm 错误！ ERESOLVE 无法解决 npm E...

我想进入新页面查看Nuxt js中api的描述

我正在 Nuxt js 中编写代码，并且我有来自 API 的新闻作为卡片，如果我单击卡片，我想转到一个新页面，其中包含来自 api 的完整描述。我怎样才能用 Nuxt js 做到这一点？ 比...

在 Nuxt v3 + Vuetify 应用程序中嵌入远程视频

我有一个 Nuxt v3 + Vuetify 应用程序，想在我的页面中嵌入一些视频。一个来自 Youtube，另一个来自 Dailymotion，另一个来自 Invidious！ 我目前正在使用 ，但是...</desc> <question vote="0"> <p>我有一个 Nuxt v3 + Vuetify 应用程序，想要在我的页面中嵌入一些视频。一个来自 Youtube，另一个来自 Dailymotion，另一个来自 Invidious！</p> <p>我目前正在使用 <pre><code>&lt;iframe&gt;</code></pre>，但我正在寻找替代方案，因为我无法再使用 iframe。</p> <p>你有什么建议？ 我尝试在线搜索，发现只有相当旧的库，并且大多数库仅支持特定的提供商（Youtube、Vimeo 等...）。</p> <p>谢谢</p> </question> <answer tick="false" vote="0"> <p>我目前遇到了同样的问题，但在 youtube 上我使用了这个 <a href="https://abdus.dev/posts/youtube-oembed/" rel="nofollow noreferrer">https://abdus.dev/posts/youtube-oembed/</a> 并且它适用于我的 Nuxt 应用程序</p> </answer> </body></html>

nuxt3 通过路由器推送传递道具

这在 nuxt2 中工作正常 我认为在 nuxt3 中，路由的 props 函数模式被忽略，或者至少看起来是这样。 这是我的代码： nuxt.config.ts { 钩子：{ '页面：扩展'（页面...

如何在构建阶段从nuxt version3中提取css

当我构建项目时，我会看到代码中“内联”使用的所有样式（在生产模式下） 重要：我的 nuxt 版本是 3 我尝试使用 nuxt generated & nuxt build & npm run build...

如何在Nuxt3中应用SASS变量

浏览器出现以下错误： [plugin:vite:css] [sass] 未定义的变量。 我从 nuxt.config.ts 中删除了 preprocessorOptions，这导致了错误的发生。不过，我只是补充一下...

打开页面时布局短暂扭曲

当我加载页面时，布局短暂地出现扭曲。我不确定原因，所以任何指导将不胜感激。 复制存储库：https://github.com/newyee/n...

Nuxt3 生成 - 预渲染时等待异步数据

&... <template> <article class="post" v-if="post"> <section v-html="post.content" ></section> </article> </template> <script setup lang="ts"> const route = useRoute(); const post = await $fetch(`/api/post/${route.params.handle}`).catch(() => {}); </script> 我希望 npm run generate 等待 $fetch，以便 post.content 将在 HTML 中呈现，而不是在加载后添加到页面。我一生都想不出任何方法来做到这一点。还可能吗？ 您可以使用 Vue 的反应系统在内容可用时有条件地渲染内容。 <article class="post" v-if="post"> <section v-if="post.content" v-html="post.content"></section> </article> </template> <script setup lang="ts"> import { useRoute } from 'vue-router'; const route = useRoute(); const post = ref(null); (async () => { try { const response = await $fetch(`/api/post/${route.params.handle}`); post.value = response.data; // Assuming your data is in response.data } catch (error) { console.error(error); } })(); </script>

Nuxt 服务器中间件发布请求不起作用

我在Nuxt js的文档（https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-servermiddleware/）中看到我可以用express扩展服务器中间件。 我用 GET req 测试了它...

如何通过加载器 prependData 将多变量添加到 Nuxt 中的所有 scss 文件中

我是 Nuxt 2.13 和 sass-loader 8.0.2 。我将向我的 scss 文件添加两个环境变量。我成功地通过加载器在 Nuxtjs 的构建部分添加了一个变量： 建造： { 装载机：{ sss：...

Nuxt 3 i18n 从 API 获取语言环境

我在 Nuxt 3 应用程序中遇到了一个问题，我想使用 i18n。我做了相当多的研究，但找不到任何有用的信息，因此我的问题来了。 我在

如何将 Express.js 与 Nuxt 3 一起使用

如何将 Express.js 与 Nuxt 3 连接？我找不到任何教程...我希望它位于 /server 目录中。我怎样才能做到这一点？ server.js 的示例 const express = require('express'); 常量应用程序 =

将 Particles.js 与 Nuxt 3 集成

各位开发者大家好， 我目前正在使用 Nuxt 3 开发一个项目，并尝试集成 Particles.js 以在特定页面上实现一些交互式粒子动画。然而，尽管...

如何在子页面中将wordpress添加到nuxtjs

我在 nuxtjs 2 中有一个项目，它部署在 vercel 上。我还有一个用于 WordPress 网站的网络服务器。是否可以将 wordpress woocommerce 商店添加到 nuxtjs。我的意思是我想要我的主要

如何在Nuxt 3中设置useFetch中使用的全局API baseUrl

如何设置全局 useFetch 可组合项（可能是 nuxt.config.ts）中使用的 baseUrl？ 如何避免在每次 useFetch 中定义它？

向 Vue Headless UI 列表框（选择）组件添加本机验证？

我正在尝试向 Vue3 或 Nuxt 3 Vue Headless UI Listbox (Select) 组件添加本机验证支持。根据我的理解，它没有直接支持，所以我想知道哪个是......

按钮内控制另一个 div 折叠的锚标记不起作用

在我的 Nuxt 2 SSR + Bootstrap 5 应用程序上，我有以下代码： 在我的 Nuxt 2 SSR + Bootstrap 5 应用程序上，我有以下代码： <button v-for="file of orderProduct.files" class="collapsed son-collapse" type="button" data-bs-toggle="collapse" :data-bs-target="`#collapseField${orderProduct.id}`" aria-expanded="false" :aria-controls="`collapseField${orderProduct.id}`" > <p><i class="fa fa-file-alt"></i> {{ file.original_filename }}</p> <div> <a @click.stop :href="`http://example.com`" target="_blank" > <i class="far fa-eye"></i>Ver </a> <span>{{ file.page_count }} {{ $tc('home.pagina', file.page_count) }}</span> </div> </button> <div :id="`collapseField${orderProduct.id}`" class="collapse summary cost-ajax" > ... </div> 当用户点击按钮时，Bootstap 的 JS Collapse 组件会切换相应的 div。没关系。但是，我希望当用户单击锚标记时打开一个选项卡。 好吧，这并没有发生。不仅选项卡没有打开，而且 div 也被切换，因为锚点上的单击事件传播到按钮中。 我认为这可能都是事件冒泡的问题，所以我使用了Vue.js内置的事件修饰符@click.stop。我还尝试调用一个方法并调用 e.stopPropagation()。这些都不会影响应用程序的行为。 最后，我觉得奇怪的是，当单击锚点内的 i 标签时，选项卡确实会打开。但可折叠元素不断切换。 您面临一个问题，因为 <button> 元素包含 <a> 元素，因此锚标记上的点击会传播到按钮并触发 Bootstrap 折叠。在 Vue 中使用 @click.stop 是停止事件传播的正确方法，但似乎在这种情况下不起作用。 因此，您必须在方法处理程序中使用 JavaScript 的本机 event.stopPropagation() 方法来停止传播： <a @click="stopPropagation" :href="`http://example.com`" target="_blank" > <i class="far fa-eye"></i>Ver </a> 在你的方法中： methods: { stopPropagation(event) { event.stopPropagation(); } } 希望这有帮助！

Nuxt 3，无法找到错误：在插件外部调用了需要访问 Nuxt 实例的可组合项

我有一个可组合项，它返回一个函数以在 5 秒的间隔内验证身份验证和刷新令牌。两者都利用 Nuxt 的 useCookie 实用函数来执行其背后的逻辑。 首先...

“NuxtConfig”类型中不存在“runtimeConfig”

我正在尝试根据安装指南创建一个Nuxt 3项目：https://nuxt.com/docs/getting-started/installation。 我一步步跟着它。但是当我想配置 nuxt.config.ts 时我...

Nuxt 3：在脚本设置中调用的插件函数可以工作，但会抛出 TypeError

在我的 Nuxt 3 项目中，我构建了一个服务器插件来设置元头标签。在我的页面/路由中，我首先从后端获取数据，然后调用插件。内容在 html 文档中显示为