nuxt.js 相关问题

如何拥有两种不同的布局而不将其设置为默认布局或使用父子关系

我做这个项目是为了在 Nuxt 中取得进展，所以我愿意接受问题、提示和建议 我想 ： 设置每个文件夹的布局，以便我可以删除我的页面/navbar-*.vue，因为我不喜欢

无头 UI 组合框（自动完成）：选择用户后删除输入

我在 Vue 项目中使用 Headless UI 库的 Combobox 组件。我的设置涉及使用组合框进行多项选择。一切都按预期进行，除了一个方面：我...

将 v-app-bar 内容放入容器时出现问题？

我需要将内容放置在容器内的 v-app-bar 内，因此它与其他页面内容排成一行。应用程序内的所有内容都应具有每个断点的最大宽度，而不是整个页面宽度。

如何为 nuxt-content 编写不区分大小写的查询

我正在使用 Nuxt Content 编写博客，它可以根据帖子的属性过滤帖子。我的属性之一是标签。现在我想为每个标签创建一个页面。 我当前的解决方案有效，但是...

Nuxt v-bind 不适用于 NuxtUI 图标和 util 文件

我有一个 Nuxt 3 应用程序，使用 NuxtUI 作为 UI 框架。 为了重用图标并避免拼写错误，我创建了一个文件 /utils/Icon.ts，如下所示： 导出枚举 IconSet { HeroIcons = '英雄图标' } 出口类

Nuxt Auth 登录 - 在服务器上的本地主机、301 和 405 上工作

我的问题是，登录/注销在我的本地主机上完美运行，但是当我将其部署到服务器上时，我收到 301 和 405 错误，并显示“此路由不支持 GET 方法。Sup.. .

如何在Nuxt 3中禁用默认路由并指定手动路由？

首先，请不要浪费时间说服我使用 Nuxt 默认的基于目录的路由：我需要手动路由，仅此而已。 “Vue router 4 支持”没有更新......

如何让Nuxt 3正确构建SSG页面+动态API路由？

我正在构建一个仅使用静态生成页面和 JSON API 路由组合的网站，没有模板的运行时 SSR。我希望 Nuxt 相应地构建它： /api 下的路由...

Nuxt 无法使用 docker-compose 访问 asyncData 上的服务器

我已经创建了这个样板已编辑，我正在另一个项目中使用它，但我无法使用它返回的 asyncData 获取数据 错误：连接ECONNREFUSED 127.0.0.1:80 在 TCPConnectWrap.afterC...

找不到名称“defineNuxtConfig”.ts(2304)

我尝试使用turborepo在monorepo中安装Nuxt 3层。我不知何故在打字稿中遇到错误，它似乎无法弄清楚 nuxt 找不到defineNuxtConfig appConfig 不适合...

Nuxt 3 上的 Vue Toastify 不更新 Toast

我正在尝试在 Nuxt 3 上使用 vue-toastify 来更新 toast，尽管我正在努力让它更新，甚至只是基本文本。浏览完他们的文档后，我正在正确更新它，并且 toastId...

无法从 Nuxt3 插件代码访问 Pinia 商店（错误提示“在插件之外”，但实际上并非如此）

已安装： [email protected] @pinia/[email protected] 皮尼亚@2.1.6 nuxt.config.ts 的相关部分： 模块：[ '@pinia/nuxt', ], 插件：[ { src: '~/plugins/router.ts' } ],

如何将输入值推入数组并在 Nuxt 2 中更新它？

我想将输入值推送到数组中并从那里更新它。如果文本区域为空，我还想删除数组内的该值。但我做不到，因为我被困在了第一

访问 Nuxt-leaflet 中的地图对象

我有一张像这样的传单地图（截图）： 我有一张像这样的传单地图（已剪断）： <template> <client-only> <div> <l-map ref="myMap" :zoom="zoom" :max-zoom="maxZoom" :min-zoom="minZoom" :crs="crs" :options="mapOptions" 我正在尝试在安装的挂钩期间访问我创建的传单地图的地图对象，如下所示： mounted() { this.maxZoom = this.$refs.myMap.mapObject.getMaxZoom() 或 this.$L.myMap.mapObject.getMaxZoom() 但我总是收到“...未定义”错误。 我在这里做错了什么以及如何在运行时使用 nuxt-leaflet 访问我的地图对象以获取诸如 .getMaxZoom() 之类的东西？没有 nuxt-leaflet，只使用 vue2leaflet 它就像一个魅力...... 我在 Nuxt 上也遇到了同样的问题。 <client-only> <LMap ref="map" @hook:mounted="mapInitialization" :zoom="1" :center="[640, 512]" :options="{ attributionControl: false, zoomControl: false }" :crs="crs" > <LImageOverlay :url="url" :bounds="bounds"></LImageOverlay> <LMarker :lat-lng="[69.5, 177.5]" :z-index="1"></LMarker> </LMap> </client-only> methods: { mapInitialization() { const map = this.$refs.map console.log('MAP FROM STUFF', map) map.mapObject.setView() } } Mounted 方法中的 $nextTick 对我来说无法正常工作，因为它需要一些勾选，并且在页面引用初始化时为空。 有点晚了，但以下内容应该适用于最新版本的 nuxt3-leaflet : <template> <div style="height:100vh; width:100vw"> <LMap ref="map" :zoom="zoom" :max-zoom="18" :center="[47.21322, -1.559482]" @ready="mapInitialized" > <LTileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors" layer-type="base" name="OpenStreetMap" /> </LMap> </div> </template> <script setup> import { ref } from 'vue' const zoom = ref(6) const map = ref(null) // When the map is ready const mapInitialized = () => { console.log('Map is ready') console.log(map.value.maxZoom) } </script>

如何使用 Pinia 在 Nuxt3 中从服务器 api 存储初始状态

我想在网站加载时首先将数据存储在 Pinia 中，这样我可以在浏览页面时从 Pinia 获取数据，而无需继续调用 api。 但是当我想通过数组方法使用数据时......

如何在 nuxt 3 usefetch 中禁用 ofetch 自动重试？

我在 nuxt 3 上使用 useFetch 可组合项时遇到问题。我希望请求仅触发一次，无论请求的结果如何。 但我找不到办法做到这一点，它总是会重试......

Pinia 商店发送多个 API 请求

我有 GridLayout，它有一个 GridItem （从 vue3-grid-layout 导入）。它们是可拖动且可调整大小的。当我移动或调整项目大小时（完成时，而不是更改期间），该组件（...

Vue Router <router-link> 具有自定义属性+插槽模板，不在前端路由（SPA）

我不确定这是否真的重要，但我正在将 Nuxt3/Vue3 与 Primefaces/PrimeVue UI 框架一起使用，特别是在 #item 模板插槽上苦苦挣扎。

在 useFetch 到 serverSupabaseClient 后访问我的数据

我正在使用 nuxt 3 和 supabase 模块 我有一个组件“AddIngredients.vue”，我尝试使用进行 api 调用 const { 数据 } = 等待 useFetch...</desc> <question vote="0"> <p>我正在使用 nuxt 3 和 <a href="http://supabase.nuxtjs.org/usage/services/serversupabaseclient" rel="nofollow noreferrer">supabase 模块</a></p> <p>我有一个组件“AddIngredients.vue”，我尝试使用 </p> 进行 api 调用 <pre><code>&lt;script setup lang=&#34;ts&#34;&gt; const { data } = await useFetch(&#34;/api/getAlimentaryProducts&#34;) console.log(data.value.data.length) &lt;/script&gt; </code></pre> <p>我在 /api/getAlimentaryProducts.ts 中完美得到了我想要的东西</p> <pre><code>import { serverSupabaseClient } from &#34;#supabase/server&#34; export default eventHandler(async (event) =&gt; { const supabase = await serverSupabaseClient(event) const { data, error } = await supabase.from(&#34;alimentary_products&#34;).select(&#34;id, name&#34;) return { data, error } }) </code></pre> <p>但回到我的组件，我必须写这个来获取我的数据：</p> <pre><code>console.log(data.value.data.length) </code></pre> <p>我的数据var是RefImpl类型 <img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL0txY3RQLnBuZw==" alt="what I receive as data"/></p> <p>有没有更好的方法来获取我的数据，而不是写得这么难看<pre><code>data.value.data.length</code></pre>？</p> </question> <answer tick="false" vote="0"> <p>为了使代码更加简洁并避免使用 data.value.data.length，您可以直接在设置脚本中解构数据对象，如下所示：</p> <pre><code>&lt;script setup lang=&#34;ts&#34;&gt; import { ref } from &#39;vue&#39; import { useFetch } from &#39;@nuxt/http&#39; const { data } = useFetch(&#34;/api/getAlimentaryProducts&#34;) const { data: alimentaryProducts } = data console.log(alimentaryProducts.length) &lt;/script&gt; </code></pre> <p>通过解构数据对象并将其重命名为 alimentaryProducts，您可以直接以 alimentaryProducts.length 的形式访问长度，这可以使您的代码更干净、更具可读性。</p> </answer> <answer tick="false" vote="0"> <p>基于luckygem的回答</p> <p>const { 数据：{ 值：{ 数据：alimentaryProduct } } } = 等待 useFetch("/api/getAlimentaryProducts")</p> </answer> </body></html>

更新 Nuxt 3 中的 v-for 组件

我有一个组件（NoteCard），它根据数组注释中的值作为 ID 使用 v-for 进行渲染。它在加载时按预期呈现，但是当我更改天数时（具有共享 s 的输入字段...