Nuxt.js是一个用于创建Vue.js应用程序的框架，您可以选择Universal，Static Generated或Single Page应用程序（受Next.js启发）
我在 nuxt3 中面临以下问题。 动态页面 [slug].vue 正确加载初始 slug 的数据 当我离开页面并返回时，新数据没有加载，而是......
Nuxt 3 - 如果defineNuxtRouteMiddleware 中没有可用令牌，则重定向到身份验证屏幕
当应用程序默认加载时，它将转到 / 路由，这是受保护的路由，如果没有可用的用户令牌，则应用程序应将页面推送到 /auth。 从...导入{defaultStore}
使用 NuxtLayout 发出事件。 Vue3 Nuxt3
我正在尝试向 Nuxt 布局组件发送事件。 但什么也没发生。 对当前组件进行简单的控制台测试是有效的。但该事件并没有触发Parent组件功能（Layout）
我正在开发一个基于Nuxt JS内容和Markdown的博客网站。在我的帖子的 markdown frontmatter 中，如果我指定草稿：true，则应该仅在开发模式下根据...
默认布局不渲染。使用以下代码创建了布局目录和default.vue。将 Nuxt 3.7.4 与 Nitro 2.6.3 和 Node js 16.13.2 结合使用 默认.vue ... 默认布局不渲染。使用以下代码创建了布局目录和default.vue。将 Nuxt 3.7.4 与 Nitro 2.6.3 和 Node js 16.13.2 一起使用 默认.vue <template> <div> Some default layout shared across all pages <slot /> </div> </template> app.vue <template> <div> <NuxtLayout> page content </NuxtLayout> </div> </template> 访问本地主机时：3000 仅显示“页面内容”，不确定为什么不显示布局内容 尝试重新启动 npm run dev 和 npm update 但它仍然不显示默认布局内容 这样使用 默认.vue <template> <div> <slot /> </div> </template> app.vue <template> <div> <NuxtLayout> <NuxtPage/> </NuxtLayout> </div> </template>
Vue 3 (Nuxt 3) 根据条件在同一路线上渲染不同的组件
我有一条类似于某些网址（/mypage）的路线，我需要根据条件（如用户代理）在该路线上渲染不同的组件，我知道 v-if 或 v-show，但我完全需要不同...
我正在 Nuxt 3 中开发一个应用程序。只有登录后才能访问该应用程序的一部分。我想对这些路由禁用 SSR，同时对公开路由保持开启状态
我是 Nuxt 新手，我无法找到如何在 Nuxt 中通过组合 API 使用 onBeforeRouteLeave 如果可以给我一个例子那就太好了谢谢
我遇到了 nuxt 3 的问题，当我使用 SSG 部署我的网站时，第一个路由（索引路由）加载了 2 个组件，例如 如果我有这样的index.vue ... 我面临 nuxt 3 的问题，当我使用 SSG 部署我的网站时，第一个路由（索引路由）加载了 2 个组件，例如 如果我有这样的index.vue <template> <Component1 /> <Component2 /> </template> 会显示成这样 <template> <Component1 /> <Component1 /> <Component2 /> <Component2 /> </template> 这仅适用于主路线（/），当我切换到任何其他路线然后回来时，问题似乎已解决，但当我刷新时，它总是生成双组件。 我知道这是一个迟来的答案，但为了陷入这个问题的人们。 nuxt 有时会混合或合并 DOM，因此必须确保 DOM 完全显示，否则使用 client-only 将防止出现此错误。 或者将 onMounted 与 v-if 一起使用，以确保组件完全可见。 即使是SSG，原理也和SSR一样。
类型错误：无法读取 Nuxt 中未定义的属性（读取“__ob__”）
从包含 ProductCard 组件的一个页面导航到另一页面时，会出现该错误。 我相信错误来自数据获取或 Mounted()，但我无法解决它。
在父级中，您可以看到单击时更改消息文本的按钮 .. 首先 在父级中，您可以看到单击时更改消息文本的按钮 <template> .. <button @click="msg_modal = 'hightasd'">first</button> <button @click="msg_modal = 'brord'">another</button> <!-- Msg Modal --> <DashboardUsedMsgModal where="bottom-left" :msg="msg_modal" :show="false" /> .. </template> <script> let msg_modal = ref(''); </script> 在子组件（消息模态）中 <template> <Transition name="fade"> <div v-if="showMsg" class="fixed min-w-[150px] h-max p-2 bg-[var(--back-dash)] flex justify-center items-center z-[20000]" :class="whereMod, parentStyle"> <span class="text-white">{{ msg }}</span> </div> </Transition> </template> <script setup> const props = defineProps({ msg: String, show: Boolean, where: String, // bottom, up, right, left, bottom-left, bottom-right, up-left, up-right (where in the page to display) parentStyle: String, }) let { msg, parentStyle, show, where } = toRefs(props); let whereMod = ref(null); let showMsg = ref(show.value); watch(msg.value, (newVal) => { // console.log(newVal); showMsg.value = true; setTimeout(() => showMsg.value = false, 1500); }, { immediate: true, deep: true, }) </script> 我想做的是当msg改变时，动态显示消息模式并在几秒钟后再次隐藏它 问题是watch仅在第一次有效，之后就不再有效。我想观看 prop (msg) 并在更改时显示模态，然后在 1500 毫秒后隐藏它。我该如何解决它？ Vue 应该在控制台中向你发出警告 无效的监视源：监视源只能是 getter/effect 函数、ref、反应对象或这些类型的数组。 要正确使用watch，您应该观看参考msg，而不是内部值msg.value watch(msg, () => { // changed from msg.value showMsg.value = true; setTimeout(() => showMsg.value = false, 1500); }, { immediate: true, deep: true, }) Vue Playground 简化示例
我正在尝试为我的用户创建一个会话cookie，为此我向后端API发出请求，希望返回我的令牌，返回我的令牌后，我需要将其放入cookie中以创建
我将 nuxt 与 vuetify 一起使用，并在单个文件中定义了所有验证规则（用于文本输入），如下所示： // @/plugins/form_validations.js 导出默认 Object.freeze({ 验证：{ ...
如何在 Nuxt3 中使用 @nuxtjs/axios 模块？
我有这个代码可以从https://fakestoreapi.com/products/获取API数据 定义页面元数据({ 布局：“产品&</desc> <question vote="4"> <p>我有这段代码可以从<a href="https://fakestoreapi.com/products/" rel="nofollow noreferrer">https://fakestoreapi.com/products/</a></p>获取API数据 <pre><code><template> <div> </div> </template> <script> definePageMeta({ layout: "products" }) export default { data () { return { data: '', } }, async fetch() { const res = await this.$axios.get('https://fakestoreapi.com/products/') console.log(res.data) }, } </script> </code></pre> <p>我已经安装了 axios 并且在 <pre><code>nuxt.config.ts</code></pre> 我有：</p> <pre><code>// https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ app: { head: { title: 'Nuxt', meta: [ { name: 'description', content: 'Everything about - Nuxt-3'} ], link: [ {rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' } ] } }, runtimeConfig: { currencyKey: process.env.CURRENCY_API_KEY }, modules: [ "@nuxtjs/tailwindcss", ], buildModules: [ "@nuxtjs/axios" ], axios: { baseURL: '/', } }) </code></pre> <p>我的控制台中有以下内容</p> <blockquote> <p> 是一项实验性功能，其 API 可能会发生变化。</p> </blockquote> <p>我没有在控制台中获取 API 数据。</p> </question> <answer tick="true" vote="5"> <p>正如本页<a href="https://axios.nuxtjs.org/" rel="noreferrer">所述，我们在 Nuxt3 中不再使用 </a><code>@nuxtjs/axios</code><pre> 模块，而是使用 </pre><code>ohmyfetch</code><pre>，它现在通过 </pre><code>$axios</code><pre> 直接嵌入到框架的核心中，如 </pre> 所写<a href="https://nuxt.com/docs/getting-started/data-fetching/#usefetch" rel="noreferrer"> .</a> </p>因此，您的配置文件应该如下所示<p> </p><code>export default defineNuxtConfig({ app: { head: { title: 'Nuxt Dojo', meta: [ { name: 'description', content: 'Everything about - Nuxt-3' } ], link: [ { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' } ] } }, runtimeConfig: { currencyKey: process.env.CURRENCY_API_KEY }, modules: [ "@nuxtjs/tailwindcss" ], }) </code><pre> </pre>给定的<p><code>/pages/products/index.vue</code><pre>可以是这样的</pre> </p><code><template> <div> <p v-for="user in users" :key="user.id">ID: {{ user.id }} 👉 {{ user.name }}</p> </div> </template> <script> definePageMeta({ layout: "products" }) export default { data () { return { users: '', } }, async mounted() { this.users = await $fetch('https://jsonplaceholder.typicode.com/users') }, } </script> </code><pre> </pre>这就是最后的样子（网络选项卡中显示成功的 HTTP 请求）<p> </p><p><a href="https://i.stack.imgur.com/11pPf.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tLzExcFBmLnBuZw==" alt=""/></a> </p> <hr/>作为确认，我们可以在<p>模块页面<a href="https://nuxt.com/modules?q=axios&version=3.x" rel="noreferrer">上看到 Nuxt3 确实不支持（也不会）该模块。</a> </p><p><code>Suspense</code><pre>错误详见</pre>官方文档<a href="https://vuejs.org/guide/built-ins/suspense.html#suspense" rel="noreferrer"></a> </p> <blockquote><p><code><Suspense></code><pre> 是一项实验性功能。不保证达到稳定状态，API 可能会在此之前发生变化。</pre> </p> </blockquote>这可能看起来很可怕，但您完全可以使用 API 本身，并且由于这是警告而不是错误，所以完全没问题！<p> </p> </answer> <answer tick="false" vote="0">对于 nuxtjs3，我更喜欢使用可组合项，它在整个应用程序中灵活且自导入。<p> </p><p><code>composables/useApi.ts</code><pre></pre> </p><code>import axios from 'axios' export const useApi = () => { const baseURL = 'https://BASE_URL.com' const storeUser = useStoreUser() return axios.create({ baseURL, headers: { Authorization: `Bearer ${storeUser.token}` } }) } </code><pre> </pre>现在我所做的就是简单<p> </p><code><script lang="ts" setup> const api = useApi() const { data } = await api({ method: 'get', url: '/auth/login' }) </script> </code><pre> </pre> </answer></body>
访问从 Laravel API 发送到 Nuxt/Javascript 应用程序的 JSON 验证错误响应
我正在尝试打印我的 Nuxt 应用程序中的验证错误，这些错误是在验证失败时从我的 Laravel API 发回的。 if ($validator->fails()) { 返回响应()->json(['errors' => $validator-...
在 Nuxt 3 中为 Tailwind 进行 Preline 工作
我正在寻找在 nuxt 3 中设置 preline。我遵循了他们的 Nuxt 2 指南但无济于事。这是我目前的代码，看起来 nuxt 甚至没有渲染脚本？ npm 我预行 nuxt.config.ts 他...
我正在开发一个 Nuxt 3 项目，并面临联系表单的问题，其中父元素似乎没有从子组件接收输入值。这是我的代码的细分：
对于一个新项目，vue-cal 在 Nuxt2 中安装得很好。但是，当我尝试将其安装在我的一个旧项目中时，它显示日期和周数未定义。 我认为我的其中一个包裹正在影响...
由于某种原因，我无法更改 Nuxt 应用程序的内容。使用 npm run dev 启动时，会显示默认应用程序，并且 元素始终存在。 现在我的“app.vue”
我正在尝试在 Vue js 中为我的 prop 创建一个自定义类型，我创建了一个 types 文件夹并将其添加到 tsconfig.typeRoots 中，IntelliSense 和所有其他东西都工作正常，c 上没有问题。 .