nuxt.js 相关问题

Nuxt.js是一个用于创建Vue.js应用程序的框架，您可以选择Universal，Static Generated或Single Page应用程序（受Next.js启发）

我有一个 nuxt 3 组件，它无法加载我从特定 URL（auth0 图像）获取的动态图像。我的模板看起来像这样：我有一个 nuxt 3 组件无法加载我从特定 URL（auth0 图像）获取的动态图像。我的模板是这样的： <template> <img class="h-28 w-28 rounded-full border-4 border-black bg-gray-300" :src="image" alt=" " /> <p> {{{name}} {{image}} </p> </template> 我的脚本设置是这样的： <script setup> import { useAuth0 } from '@auth0/auth0-vue'; let auth0 = process.client ? useAuth0() : undefined; let name = ref(''); let image = ref(''); //check user authentication state and set name and image if(auth0?.isAuthenticated){ name.value = auth0?.user.value.nickname; //image url : https://.... image.value = auth0?.user?.value.picture; } </script> 段落中显示名称和图片，但src属性中没有图片url，因此图片不显示。在我返回并在 VSCode 中输入一些内容后，图像实际上呈现出来了。知道如何渲染图像吗？它应该被定义为计算属性，因为它取决于其他属性的值（对name做同样的事情）： <script setup> import { useAuth0 } from '@auth0/auth0-vue'; let auth0 = process.client ? useAuth0() : undefined; const name = computed(()=>auth0?.isAuthenticated ? auth0?.user?.value.nickname:''); const image = computed(()=>auth0?.isAuthenticated ? auth0?.user?.value.picture:''); </script>

vue.js nuxt.js nuxtjs3

回答 1 投票 0

nuxt3中的统一路由转换

无论页面或布局更改如何添加路由转换我知道 nuxt 提供页面和布局转换，但页面更改时布局保持静态预期的行为...

vue.js nuxt.js vue-router nuxt3 vue-transitions

回答 0 投票 0

使用 dotenv 为 Nuxt web 应用程序安装 Firebase 环境

我继承了一个现有的 Nuxt + Firebase 网络应用程序，该应用程序一年多没有更新/全新部署。我从存储库中获取了文件，并在过去三天里回溯了

firebase nuxt.js dotenv .env

回答 0 投票 0

Vee-validate + VueSimpleSuggest 在加载页面上显示错误

在这里输入图片描述我正在使用 2 个模块 Vee-validate + VueSimpleSuggest。如果您只使用 Vee-validate，一切都会正常运行。但是如果使用 Vee-validate + VueSimpleSuggest，那么 ...

vue.js nuxt.js vee-validate vue-simple-suggest

回答 0 投票 0

Create global helper / mixin Nuxt 3

我在 nuxt 3 项目中使用 Swiper Element，我想创建一个全局插件并调用 register()。我似乎无法让它工作。这在 Nuxt 2 中非常容易。插件/swiper.ts ...

vue.js nuxt.js nuxtjs3

回答 2 投票 0

无法在部署服务器上检索 Nuxt3 env 变量

正如我在标题中所说，当应用程序部署在服务器上时，我无法在 Nuxt3 上获取 env 变量。我在 Digital Ocean 服务器上运行该应用程序，并通过 Dockerfile 和 Github Action 进行部署

node.js docker nuxt.js nuxt3

回答 0 投票 0

如何同时使用nuxt 2和tailwind 2？

我尝试在我的 nuxt 2 项目上使用 vuejs 2 语法并想使用 tailwind 2，因为 vuejs 2 仅支持 tailwind 2。当我尝试设置 nuxt 2 项目时，它需要 postcss 8.0 但 tailwind 2 需要 pos ...

vuejs2 nuxt.js tailwind-css

回答 0 投票 0

如何使用带有 SEO 路径的 API 内容将 Google 爬虫重定向到 Nuxt.js 应用程序中的特定页面？

我有一个 API 端点，例如 api/v2/pages/custom_texts。实际上我想从来自 API 的 seo_path 创建页面路由。这个 API 包括内容，& seo_path 这样的 “

api routes nuxt.js seo google-crawlers

回答 0 投票 0

如何使用 VueFire 在 Nuxt 3 服务器路由中访问 Firestore 集合

我正在构建一个允许用户从 Firestore 集合中呈现 RSS 提要的应用程序。我的解决方案是使用一个 Nuxt 服务器路由，它返回一个通过 RSS 提要呈现的 XML 文件

firebase google-cloud-firestore nuxt.js nuxtjs3 vuefire

回答 0 投票 0

使用 Storyblok CMS API 时收到 401“未经授权”

我正在努力开始使用 Storyblok CMS。我一直在关注 Interwebs 上的一些教程，例如 Nuxt JS with Storyblok 等，但我似乎无法成功调用 API w...

api nuxt.js content-management-system storyblok

回答 0 投票 0

Nuxt3/vue3 如何显示从头组件调用的模态组件？

我正在使用 nuxt3/vue3。我很难根据我的标头组件调用模态。我只是将模态放在标题组件中并使用 Teleport 函数来传送模态 ...

javascript vue.js nuxt.js vuejs3

回答 2 投票 0

如何使用 NuxtJS 从 strapi 渲染图像（来自 cloudinary）？

我正在从 Strapi CMS 获取一些数据，其中包含有关 cms 内容的所有信息。我正在尝试使用数据在我的 nuxt 网络应用程序中呈现图像（cloudinary 提供者），但我越来越...

javascript vue.js nuxt.js strapi nuxtjs3

回答 1 投票 0

如何使用 useArrayField 和 yup 验证复选框

问题我想使用 Nuxt3 为跟随输入设置验证，但不能。成分 <... 问题我想用 Nuxt3 为跟随输入设置验证，但是不能。组件 <template> <form method="" action="" @submit="onSubmit"> <ul class="form_radio_list"> <li v-for="(employmentType, index) in mastersStore.masters?.EmploymentTypeCodes" :key="employmentType.code" > <label class="form_checkbox_label"> <input type="checkbox" name="employment_type_codes" v-model="employmentTypes" :value="employmentType.code" /> <p class="form_checkbox_text">{{ employmentType.name }}</p> </label> </li> </ul> </form> </template> 剧本 <script> import { useForm, useField, useFieldArray } from 'vee-validate' import { useMastersStore } from '~~/store/master' import type { UpdateUserConditionForEmailInput } from '~~/types/user_condition_for_email' import * as yup from 'yup' const validationSchema = yup.object({ employment_type_codes: yup.array().min(1, '雇用形態は必須です'), }) const { fields: employmentTypes } = useFieldArray('employment_type_codes') const onSubmit = handleSubmit((params: UpdateUserConditionForEmailInput): void => { props.goToConfirm(params) }) </script> 基于README，我尝试了一些数组模式，但没有成功。 https://github.com/jquense/yup/blob/master/README.md#arrayoftype-schema-this //CASE1 const validationSchema = yup.object({ employment_type_codes: yup.array().of( yup.object().shape({ employmentTypes: yup.boolean().required('雇用形態は必須です'), }) ), employment_type_codes: yup.array().required(1, '雇用形態は必須です'), }) //CASE2 const validationSchema = yup.object({ employment_type_codes: yup.array().required(1, '雇用形態は必須です'), })

nuxt.js yup vee-validate

回答 0 投票 0

如何在每个 nuxt 页面上只捕获 'vue 点击事件（@click=function）'

我想在每个@click事件中添加一些功能（仅vue事件）但是我不知道如何区分每个nuxt页面上的[vue点击事件]和[js点击事件]。区分【vue点击事件】和【js

javascript vue.js nuxt.js mouseclick-event

回答 0 投票 0

JS 确认方法在 vue 2 中切换 vuetify 复选框

这次尝试让事情变得非常忙碌。我只有一个 v-dialog，里面是一个复选框。当您单击复选框时，我们会运行一个 confirm() 方法来打开以浏览器为中心的对话框以确认...

javascript vue.js vuejs2 nuxt.js vuetify.js

回答 1 投票 0

Nuxt 如何处理别名？

所以我实际上正在研究不同的别名方法。我正在开发一个项目，该项目具有使用 webpack 或 vite 构建应用程序的两种选择。现在我想添加一个不同步的方法