nuxt.js 相关问题

如何在Nuxt 3中使用useFetch中的pending和status？

我尝试使用 Nuxt 3 中的 useFetch 可组合项来禁用按钮并在 POST 请求挂起时显示微调器，如下所示： const { 待处理、状态、执行 } =...

为什么 Nuxt 3 中的 useFetch POST 请求负载为空？

下面的 POST 请求的请求负载就是网络选项卡中的 {"email":""} 。 当我在请求正文中硬编码 email.value 时，它可以工作，但它似乎没有得到...

nuxt.js - 如何动态设置CSS背景图片

我使用 Nuxt.js，并且有一个自定义组件。 该组件在组件中有css，使用css设置背景图片。 我已尝试以下操作，但运行时出现错误。 呃...

如何使用vite动态导入json文件

我在 Nuxtjs 项目中使用 vue-i18n，我想用 vite 动态导入我的语言环境文件。 当我使用 webpack 时，这些代码运行良好 插件/i18n.js 从“vue”导入 Vue； 导入 VueI18n...

nuxt (2) 没有配置任何加载程序来处理此文件 (@aws-sdk/client-dynamodb)

出现错误： 未找到这些依赖项： 努克斯02 | 努克斯02 | * ./middleware/checkForRedirect.js 中的 @aws-sdk/client-dynamodb 努克斯02 | * @aws-sdk/lib-dynamodb 在 ./middleware/checkForRedire...

如何从组件输入中捕获数据？

我有一个名为 NewIngredientInput 的组件，我在新菜谱页面上使用它。该组件由 3 个输入量、单位和名称组成。我正在使用 Nuxt 3，使用 Formkit 和 consum 处理表单...

内容模块设置的页面标题在导航后不会变回原样

我正在为我的网站使用 Nuxt 3 和 Nuxt Content。我在 nuxt.config.ts 文件中设置了默认页面标题（请参阅文档：SEO 和 Meta），内容模块在每个页面上设置标题...

如何在 Nuxt 2 或 3 中使用 .env 变量？

我在项目根目录中有 .env 文件，在我的 nuxt 配置中，我使用变量来配置 ReCaptcha，如下所示： 从“dotenv”导入 dotenv dotenv.config() 导出默认值{ 模块：[ ...

Nuxt：选择默认以外的客户端配置

我正在使用 Nuxt 和 Nuxt-Apollo 创建我的 Vue 应用程序。我的 nuxt.config.js 文件中有以下 apollo 配置： 阿波罗：{ 客户端配置：{ 默认： { httpEndpoi...

使用 TypeScript 和 SSR 在 Nuxt.js 中进行 Base64 编码/解码

有没有一种简单的方法可以在 Nuxt.js 中将字符串编码到 Base64 或从 Base64 解码，并支持服务器端渲染，最好是 TypeScript？

在 Nuxt 3 中使用 $fetch、useAsyncData 或 useFetch 来处理 GET 和 POST 请求？

我正在使用 Nuxt 3 和 Laravel API 后端，并试图找出应该使用哪个可组合 useAsyncData 或 useFetch，或者只是 $fetch 来处理 CRUD 和身份验证中的不同 API 请求。

Nuxt 中的 Vuetify 默认样式问题

我的代码是 <... 我的代码是 <div class="cd-page__details-wrapper"> <v-text-field label="Outlined" placeholder="Outlined" outlined ></v-text-field> </div> 但我有一些可怕的事情 我的nuxt.config.js buildModules: [ '@nuxtjs/dotenv', '@nuxtjs/vuetify', ], OP的问题通过将v-app添加到主div来解决，就像那样 <div class="v-app"> <v-text-field label="Outlined" placeholder="Outlined" outlined ></v-text-field> </div> 对我来说，我在生产版本中发现 Vuetify 组件缺少一些 CSS，问题出在 nuxt-purgecss 模块上，将其从 modules 中的 nuxt.config.ts 键中删除并再次重建后，它起作用了。 但是现在未清除的CSS存在问题（正如kisu指出的那样），所以我在nuxt-purgecss模块的repo中打开了一个问题。 问题：Vuetify 生产版本中缺少 3 种样式

如何在Nuxt 3中观看路线？

我不知道如何在Nuxt3中观看路线。 在 Nuxt2 中，在任何组件中制作它都非常容易。有谁知道我如何在 Nuxt3 中写这个？ 导出默认值{ .... 观看：...</desc> <question vote="2"> <p>我不知道如何在 Nuxt3 中观看路线。</p> <p>在 Nuxt2 中，在任何组件中制作它都非常容易。有谁知道我如何在 Nuxt3 中写这个？</p> <pre><code>&lt;script&gt; export default { .... watch: { $route(to, from) { console.log(&#39;route change to&#39;, to) console.log(&#39;route change from&#39;, from) }, }, .... } &lt;/script&gt; </code></pre> </question> <answer tick="true" vote="6"> <p>知道了</p> <pre><code>&lt;script lang=&#34;ts&#34; setup&gt; const menu = reactive({ isOpen: false }) const route = useRoute(); watch(route, value =&gt; { menu.isOpen = false }, {deep: true, immediate: true}) &lt;/script&gt; </code></pre> </answer> <answer tick="false" vote="0"> <pre><code>watch( () =&gt; route.fullPath, () =&gt; { set(menuOpened, false); }, ); </code></pre> <p>这对我有用</p> </answer> </body></html>

nuxt 3 和加载外部脚本

我正在将此脚本加载到我的 nuxt3 应用程序中 （功能（） { var theScript = document.createElement("script"); theScript.setAttribute("type", "text/javascript&qu...

将值从子级传递给父级

我在 Nuxt UI 中有一个组件。 {{ $t('导航。 我在 Nuxt UI 中有一个组件。 <template> <div> <label for="phone" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">{{ $t('nav.cellphone') }}</label> <div class="relative mb-6" dir="ltr"> <UInput v-model="phone" class="text-left" :placeholder="$t('registration.cellphone')" icon="i-heroicons-phone" type="phone" name="phone" /> </div> </div> </template> 家长是： <LazyModalsLoginsignupElementsPhone /> 问题是我想在父级中获得 UInput 的当前值和更改值 <script setup> 您需要将 phone 制作为 LazyModalsLoginsignupElementPhone 的道具 LazyModalsLoginsignupElementsPhone.vue <script setup> const props = defineProps({phone: {type: String, required: true}); </script> <template> <div> <label for="phone" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">{{ $t('nav.cellphone') }}</label> <div class="relative mb-6" dir="ltr"> <UInput v-model="phone" class="text-left" :placeholder="$t('registration.cellphone')" icon="i-heroicons-phone" type="phone" name="phone" /> </div> </div> </template> ParentElement.vue <script setup> const phone = ref('555-555-5555'); </script> <template> <LazyModalsLoginsignupElementsPhone :phone="phone" /> </template>

我的 nuxt 会根据您在网站中的位置进行重定向

这是一个例子： 我有一个标题，其中有一些链接，其中一个的网址为：“/aig-en” 但是，如果我在登录时进入“个人数据”部分，这是一个不同的地方

Nuxt i18n 在中间件内调用 useRoute 可能会导致误导结果

所以我在 nuxt3 中收到此警告： 在中间件中调用 useRoute 可能会导致误导性结果。相反，使用传递给中间件的 (to, from) 参数来访问新旧 ro...

在 Nuxt 中设计身体

我正在尝试向 Nuxt 中的 body 标记添加样式，但 default.vue 似乎会覆盖它（它不是从 body 继承，因为它是在我的纯 html 构建中 - 我将其移植到 Nuxt） 。 我有

在 Vue 上的文章正文中插入组件

Nuxt 3 和 Vue 网站。需要将组件插入到文章的 html 中并替换特殊标签。例如，如果 #GALLERY# 标签出现在 a...

handler 在 nuxt.js 中未定义

这是我的模板： 这是我的模板： <template> <div> <input type="search" placeholder="search" v-model="searchTerm1" @input="search" /> <div v-if="searching"> <div v-for="post in posts" :key="post.slug"> <h3>{{ post.title }}</h3> </div> </div> </div> </template> 当我想在输入中搜索某些内容时，给我这个错误：处理程序未定义 渲染页面时发生错误。检查开发者工具控制台了解详细信息。 这是我的脚本： <script> import gql from 'graphql-tag'; const search1 = gql` query search($searchTerm1: String) { posts(where: { search:$searchTerm1}) { edges { node { slug title } } } }`; export default { data() { return { searchTerm1: '', searching: false, posts: [] }; }, async search() { if (this.searchTerm1 === '') { this.searching = false; } else { this.searching = true; const { data } = await this.$apollo.query({ query: search1, variables: { searchTerm1: this.searchTerm1 } }) this.posts = data.posts.edges.map(edge => edge.node); } } }; </script>