nuxt.js 相关问题

如何从第三方库更改组件行为

我正在使用 Nuxt3 for Vue3 和组合 API 构建一个网站。我不明白如何覆盖库组件属性。这里我使用Radix-vue。使用 NavigationMenu 组件时，

在 Nuxt 3 中收到 useFetch 的错误响应后如何禁用缓存

如果我运行 useFetch 并收到 404 500... 更改页面并返回原始页面后，useFetch不会再次请求，相同的信息将保留。 但如果我刷新页面，我们...

Nuxt 应用程序中的全屏模式会更改背景颜色

我想要一个按钮（图标），使整个页面全屏。我确实在我的 Nuxt 3 应用程序中实现了它，但是当页面全屏时，它会将背景颜色从白色更改为黑色......

Nuxt3 - Netlify：路由更改时不调用 useAsyncData

我有一个 Nuxt3 的应用程序，部署到 Netlify。我的问题是：当我的路线改变时，不会调用 useAsyncData 。我像平常一样使用 NuxtLink 在页面之间导航。 它在本地主机上完美运行......

如果我在 Nuxt 3 项目的 <script setup> 中定义了列表，为什么列表未定义？

我有一个 Nuxt 3 项目，我创建了一个生成可变数量元素的组件，为此，元素在调用时会得到一个数组。 在脚本设置中，我定义了这个数组...

从 Nuxt createError 响应中删除堆栈字段

我制作了服务器API来验证Nuxt上的一些数据，如下所示： 导出默认的defineEventHandler（异步（事件）=> { const body = 等待 readBody(事件); const 结果 = schema.safeParse(body); ...

在nuxt2中实现验证码

我正在开发 Nuxt.js 2 项目，并且使用 @nuxtjs/recaptcha 包来实现 Google reCAPTCHA 进行表单验证。我已成功将 reCAPTCHA 添加到我的索引页面，但是当我添加...

在 localhost 3000 nuxt 页面运行 npm run dev 后显示

在此输入图像描述 { “名称”：“投资组合”， “版本”：“1.0.0”， "description": "个人网站", “私人”：真实， ”

如何解决 nuxt 3 中的动态图像路径问题，我的图像未在浏览器上显示

我正在使用的动态图像路径。我也使用过 require 但它显示错误 require undefined 我正在使用的动态图像路径。我也使用过 require 但它显示错误 require undefined <img :src="`../assets/images/${director.image}`" :alt="director.name"> 但是当我使用 _nuxt 时它就会工作 <img :src="`_nuxt/assets/images/${director.image}`" :alt="director.name"> 页面脚本 data() { return { directors: [ { image: "directorsImg1.png", }, { image: "directorsImg2.png", }, { image: "directorsImg3.png", } ] }; }, methods: { toggleModal(director) { this.selectedDirector = director; this.showModal = !this.showModal; } } 使用变量路径时需要完整的文件目录 <template> <img :src="showImageIndex === 1 ? Img1 : Img2"/> </template> <script setup> import Img1 from '../assets/images/Img1.png'; import Img2 from '../assets/images/Img2.png'; const showImageIndex = ref(1); <script> _nuxt/...工作的原因是你使用的是静态路径，就像使用CDN的路径一样，这与vite无关，图像已经被vite捆绑在_nuxt文件夹中。当您在生产模式下运行此程序时，将为静态文件添加随机哈希尾部，并且此方法将不起作用。

如何在 json 部分的 Vue 文件中使用 I18n

我使用vue.js，nuxt.js，我安装了i18n包，配置了它，如果Vue文件中的文本，翻译工作正常。 Vue 文件有一个从 json 加载的菜单，该菜单位于同一页面上。 这是...

Nuxt 中未调用组件的异步设置函数

我有一个组件。像之类的东西。在该组件文件中，我有一个异步设置函数，如下所示： 我有一个组件。像<Component></Component>之类的东西。在该组件文件中，我有一个异步设置函数，如下所示： <template> <!-- stuff --> </template> <script> export default defineNuxtComponent({ data() { return { // ... }; }, async setup() { console.log("setup"); } }); </script> 如果我将该组件包含在另一个组件中，我希望调用该设置函数并且“设置”出现在控制台中。但是，没有调用任何设置函数。有谁知道为什么会发生这种情况？ 编辑：我刚刚注意到，如果我更改文件中的某些内容并且 Nuxt 执行一些热重载，则会调用设置函数。 问题消失了。也许是其他原因导致错误出现。

将 Nuxt3 部署到 AppEngine Standard 或 Felxible 环境

我在将我的应用程序部署到 Google App Engine 时遇到问题，该应用程序在 Nuxt3 中使用服务器端渲染 (SSR)。虽然我设法使用 Docker 容器将其成功部署到 GCP Cloud Run，但它...

Nuxt 3 开发/生产环境

我正在尝试在Nuxt 3中设置开发/生产环境。原因是为了一些测试。如果应用程序 url 以develop-、staging-或test-开头，我想使用测试端点，例如...

Nuxt 在 M1 芯片 Mac 上构建太慢

我正在我的新M1芯片机器（Mac）上为Nuxt项目开发环境。 问题是Nuxt项目的构建速度太慢。 我将nodenv安装到我的项目中，并使用v12.9.0。在...

当在子组件中单击链接时，如何隐藏 Vue.js 应用程序中的搜索栏？

我有最里面的子组件，它是 home-book-line： 我有最里面的子组件，即 home-book-line： <template> <div> <div v-if="items && items.length > 0"> <nuxt-link :to="`/books/${item.id}`" @click="closeAndHideSearchBar" class="d-flex align-center pb-4 pr-2" v-for="item in items" :key="item.id"> <v-img width="30" height="44" contain :src="item.image" class="bookImage" /> <div class="mr-3 text-right"> <span class="body4-medium" style="color: #262626">{{ item.title }} / </span> <span class="body4-medium" style="color: #262626" v-for="(associate, index) in item.associates.author" :key="associate.id"> {{ associate.title }} {{ index < item.associates.author.length - 1 ? ', ' : '' }} </span> <span class="caption3-regular s60--text d-block" v-for="associate in item.associates.category" :key="associate.id">{{ associate.title }}</span> </div> </nuxt-link> </div> <div v-else class="body1-medium text-center mt-4">نتیجه ای یافت نشد.</div> </div> </template> <script> export default { name: "bookLink", props: ['items'], methods: { closeAndHideSearchBar() { this.$emit('closeSearchBar'); }, }, } </script> 这个组件在另一个子组件中使用，即 home-search-bar-app 组件： <template> <v-card class="borderRadius-4 pa-2" style="box-shadow: 0px 0px 8px rgba(145, 145, 145, 0.15) !important" :showSearchBar.sync="showSearchBar"> <v-row class="ma-0"> <v-col cols="12"> <v-tabs v-model="tabs" color="#091E42"> <v-tab href="#all">همه</v-tab> <v-tab href="#book">نام کتاب</v-tab> <v-tab href="#category">موضوع</v-tab> <v-tab href="#editor">نام نویسنده</v-tab> </v-tabs> <x-hr /> </v-col> <v-col cols="8"> <div> <v-tabs-items v-model="tabs"> <v-tab-item value="all"> <home-book-link v-if="allBookLoadig" :items="allSearchResult" @closeSearchBar="closeSearchBar" /> <!-- <home-expansion-panels :panels="panels" /> --> </v-tab-item> <v-tab-item value="book"> <home-book-link v-if="bookNameLoading" :items="bookNameSearchResult" @closeSearchBar="closeSearchBar" /> <!-- <home-expansion-panels :panels="panels" /> --> </v-tab-item> <v-tab-item value="category"> <home-book-link v-if="categoryLoading" :items="categorySearchResult" @closeSearchBar="closeSearchBar" /> </v-tab-item> <v-tab-item value="editor"> <home-book-link v-if="authorLoading" :items="authorSearchResult" @closeSearchBar="closeSearchBar" /> </v-tab-item> </v-tabs-items> </div> </v-col> </v-row> </v-card> </template> <script> export default { name: "SearchBarApp", props: { toggle: false, searchText: String, showSearchBar: false }, methods: { closeSearchBar() { this.$emit('close'); }, }, } </script> 这个组件在父级中使用如下： <v-col cols="7" style="position: relative" class="px-0 mx-2"> <x-input class="body3-regular serach-input" id="grey" placeholder="جستجو نام کتاب، موضوع یا نام نویسنده" appendIcon="mdi-magnify" v-model="searchText" @input="showSearchBar = searchText.length > 0" /> <home-search-bar-app ref="searchBar" :showSearchBar.sync="showSearchBar" @close="showSearchBar = false" style="position: absolute;top: 90px;left: 0px" :search-text="searchText" @changeSearch="(val) => changeSearch(val)" class="d-none d-sm-block w-full" /> </v-col> 我希望当我单击 home-book-link 组件时能够隐藏 home-search-bar-app，并且 showSearchBar 必须为 false，并且我想处理发出事件，但我努力尝试但没有得到任何结果。如果任何人都可以帮助我，我会很高兴。 我没有看到您在要隐藏/显示的元素上使用 v-if 或 v-show。我认为v-if="showSearchBar"应该这样做。因此，当“showSearchBar”为 false 时，该元素将被删除，为 true 时，该元素将被添加。 v-if 将从 DOM 中删除元素，而 v-show 只会隐藏它。 我希望这有帮助。

Nuxt - 从公共组件项目使用时无法解决依赖关系

我有一个 Nuxt 项目（我们称之为主项目），它使用我开发的自定义组件库（我们称之为组件项目）。组件项目有 nuxt 依赖，我...

当我尝试 CopyTo 时，Api Sheets 出现 Nuxt 2 问题

问题 嗨，大家好。 当我尝试发送这个请求时，我不知道为什么它不起作用，我有Oauth2.0，我碰巧使用Nuxt2和Nuxt/auth来制作静态页面。这就是 axios 发送此请求的原因，但是...

Nuxt 3/Vue 3 反应性问题，在 v-for 循环中渲染组件时

嘿社区:)我有一个反应性问题（我认为这与反应性有关）。 描述 我有 FileInput.vue 组件。使用该组件，我将文件上传到项目。添加新图像后，...

Nuxt 上的 PageSpeed 性能分数问题 [已关闭]

我的建筑开发网站面临性能问题。在桌面上，性能得分范围为 52 到 65，主要问题是“最大的内容绘制”和“累积...

在vue中观察div宽度变化

我有一个 nuxt 应用程序，其中有两个侧边栏，一个在左侧，一个在右侧。 两者都是固定的，主体有左右填充。 在中间我有 加载页面。 ...