nuxt.js 相关问题

如何在 Nuxt 插件中获取完整的 url？

我无法访问包含所有内容的 nuxt js 插件中的 url。简而言之：网址中有一部分显示了人们从哪个国家/地区访问以及该国家/地区应该用于...

如何在 Nuxt.js 2 上隐藏身份验证令牌？

我需要使用 JWT 身份验证令牌通过 Apollo 从 NuxtJS 前端查询 Strapi 后端。 我搜索了很多关于如何在 Nuxt.js 2 上隐藏身份验证令牌的信息，但没有成功。我...

如何在Vitest中模拟Supabase？

我有一个 Nuxt3 应用程序，它使用 @nuxtjs/supabase 模块进行身份验证和存储，并尝试向其中添加 Vitest 单元测试。 在我的 app.vue 中，我有以下内容： <p>我有一个 Nuxt3 应用程序，它使用 <a href="https://supabase.nuxtjs.org" rel="nofollow noreferrer">@nuxtjs/supabase</a> 模块进行身份验证和存储，并尝试向其中添加 Vitest 单元测试。</p> <p>在我的<pre><code>app.vue</code></pre>中，我有以下内容：</p> <pre><code>&lt;script lang=&#34;ts&#34; setup&gt; import type { Database } from &#39;@/types&#39;; const supabase = useSupabaseClient&lt;Database&gt;(); supabase.auth.onAuthStateChange(async (event) =&gt; { if (event === &#39;SIGNED_OUT&#39;) { await supabase.removeAllChannels(); } }); &lt;/script&gt; &lt;template&gt; &lt;div class=&#34;bg-white h-full&#34;&gt; &lt;NuxtLayout&gt; &lt;NuxtPage /&gt; &lt;/NuxtLayout&gt; &lt;/div&gt; &lt;/template&gt; </code></pre> <p>在我的<pre><code>tests/unit/app.spec.ts</code></pre>：</p> <pre><code>import { mountSuspended } from &#39;@nuxt/test-utils/runtime&#39;; import { describe, expect, it, vi } from &#39;vitest&#39;; import app from &#39;@/app.vue&#39;; // const supabaseClientMock = vi.fn(() =&gt; ({ // auth: { // onAuthStateChange: vi.fn(), // }, // realtime: { // removeAllChannels: vi.fn(), // }, // })); // vi.stubGlobal(&#39;useSupabaseClient&#39;, supabaseClientMock); // vi.mock(&#39;#imports&#39;, () =&gt; { // return { // useNuxtApp: () =&gt; ({ // $supabase: { // client: { // auth: { // onAuthStateChange: vi.fn(), // signIn: vi.fn(), // signOut: vi.fn(), // }, // realtime: { // removeAllChannels: vi.fn(), // }, // // Add other properties and methods as needed // }, // }, // }), // }; // }); const supabaseClientMock = vi.fn(() =&gt; ({ auth: { onAuthStateChange: vi.fn(), }, realtime: { removeAllChannels: vi.fn(), }, })); vi.stubGlobal(&#39;useSupabaseClient&#39;, supabaseClientMock); describe(&#39;App&#39;, async () =&gt; { describe(&#39;App Component&#39;, async () =&gt; { it(&#39;renders the app&#39;, async () =&gt; { const wrapper = await mountSuspended(app); expect(wrapper.exists()) .toBe(true); }); }); }); </code></pre> <p>如您所见，我尝试了许多不同的变体，但是我不断遇到相同的错误：</p> <pre><code>TypeError: Cannot read properties of undefined (reading &#39;auth&#39;) ❯ setup app.vue:7:7 5| supabase.auth.onAuthStateChange(async (event) =&gt; { 6| if (event === &#39;SIGNED_OUT&#39;) { 7| await supabase.removeAllChannels(); | ^ 8| } 9| }); ❯ wrappedSetup node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:93:26 ❯ clonedComponent.setup node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:141:48 ❯ callWithErrorHandling node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:195:19 ❯ setupStatefulComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7572:25 ❯ setupComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7533:36 ❯ mountComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5861:7 ❯ processComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5827:9 ❯ patch node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5306:11 ❯ ReactiveEffect.componentUpdateFn [as fn] node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5971:11 This error originated in &#34;tests/unit/app.spec.ts&#34; test file. It doesn&#39;t mean the error was thrown inside the file itself, but while it was running. The latest test that might&#39;ve caused the error is &#34;renders the app&#34;. It might mean one of the following: - The error was thrown, while Vitest was running this test. - If the error occurred after the test had been completed, this was the last documented test before it was thrown. </code></pre> <p>理想情况下，我可以将其移至一个文件中，以便在类似<pre><code>setupFiles</code></pre>之类的内容中使用，而不是在每个测试文件中模拟 Supabase，但是如果我只需要先让它工作！</p> <p>就其价值而言，我确实在另一个测试文件中得到了一个可以正常工作的版本，该文件在辅助函数中使用了 Supabase，但我无法在应用程序规范中复制它：</p> <pre><code>vi.mock(&#39;@/utils/helpers&#39;, () =&gt; { const buildImageSrc = vi.fn((url: string) =&gt; url); return { useSupabaseClient: () =&gt; ({ storage: { from: () =&gt; ({ getPublicUrl: (url: string) =&gt; ({ data: { publicUrl: url }, }), }), }, }), buildImageSrc, }; }); </code></pre> </question> <answer tick="true" vote="0"> <p>对于后代，我想我已经弄清楚了：</p> <pre><code>const { useSupabaseClient } = vi.hoisted(() =&gt; { return { useSupabaseClient: vi.fn() .mockImplementation(() =&gt; { return { auth: { onAuthStateChange: vi.fn(), }, realtime: { removeAllChannels: vi.fn(), }, storage: { from: () =&gt; ({ getPublicUrl: (url: string) =&gt; ({ data: { publicUrl: url }, }), }), }, }; }), }; }); mockNuxtImport(&#39;useSupabaseClient&#39;, () =&gt; useSupabaseClient); </code></pre> </answer> </body></html>

全局 pageTransition 挂钩不起作用 - Nuxt 3

我想为 nuxt.config.ts 文件的每个页面运行 pageTransition 挂钩，但挂钩不起作用！ 页数： /测试 ： ... 我想为 pageTransition 文件的每一页运行 nuxt.config.ts 挂钩，但挂钩不起作用！！ 页数： /测试： <script setup lang="ts"></script> <template> <div> <h1>Test Page</h1> <NuxtLink to="/test2">test2</NuxtLink> </div> </template> /测试2： <script setup lang="ts"></script> <template> <div> <h1>Test 2 Page</h1> <NuxtLink to="/test">test</NuxtLink> </div> </template> nuxt.config.ts export default defineNuxtConfig({ ssr: false, devtools: { enabled: false }, nitro: { static: true, }, app: { pageTransition: { name: "page", mode: "in-out", onEnter(el, done) { console.log("enter"); done(); }, onLeave(el, done) { console.log("leave"); done(); }, }, }, }); onEnter 和 onLeave 不起作用。 它也不适用于布局。我希望它在某些页面上运行，而不是在所有页面上运行。 全局页面转换可以通过使用 CSS 来实现，CSS 将通过 CSS 选择器应用于每个页面，这既是性能也是 CSS 的预期用法。 您可以设置一些全局值，如下所示 export default defineNuxtConfig({ app: { pageTransition: { name: 'fade', mode: 'out-in' // default }, layoutTransition: { name: 'slide', mode: 'out-in' // default } } }) 但是你仍然需要在某处编写一个全局CSS文件来定义这个动画。 最简单的方法是使用 app.vue 中所写的内容来获得全局的东西。 <template> <NuxtLayout> <NuxtPage /> </NuxtLayout> </template> <style> .layout-enter-active, .layout-leave-active { transition: all 0.4s; } .layout-enter-from, .layout-leave-to { filter: grayscale(1); } </style> JavaScript 钩子并不意味着是全局的，因为它们需要使用一些查询选择器。由于 Vue/Nuxt 的状态性质，这不是 JS 的正确用法。 您同时可以使用它们进行日志记录、触发特定操作等... <script setup lang="ts"> definePageMeta({ pageTransition: { name: 'custom-flip', mode: 'out-in', onBeforeEnter: (el) => { console.log('Before enter...') }, onEnter: (el, done) => {}, onAfterEnter: (el) => {} } }) </script> 但这些不是意味着在这种情况下进行过渡。 VueJS 应用程序可能还不错，但为什么要在发生水合作用的同构环境中使用 JS 进行转换呢？这只是自找痛苦而已。 当然，如果您使用 GSAP 或其他东西，那么这样做是有意义的，但它将是逐页的基础或具有全局初始化的上层布局转换。我认为这不是您在这个问题中所要求的，否则会提到它。

如何写页面代码而不重复？ - nuxt 3

现在如果我有一个页面/测试： 定义页面元数据({ 页面转换：{ 名称：“动漫”， 模式：“从外到内”， onEnter() { 控制台...</desc> <question vote="0"> <p>现在如果我有一个页面<pre><code>/test</code></pre>：</p> <pre><code>&lt;script setup lang=&#34;ts&#34;&gt; definePageMeta({ pageTransition : { name : &#34;anime&#34;, mode : &#34;out-in&#34;, onEnter() { console.log(&#34;enter&#34;); } } }); &lt;/script&gt; </code></pre> <pre><code>&lt;template&gt; &lt;div&gt; &lt;h1&gt;Title&lt;/h1&gt; &lt;NuxtLink to=&#34;/test&#34;&gt;test&lt;/NuxtLink&gt; &lt;/div&gt; &lt;/template&gt; </code></pre> <p>例如，我有：</p> <p><pre><code>/test2</code></pre></p> <p><pre><code>/test3</code></pre></p> <p><pre><code>/test4</code></pre></p> <p><pre><code>/test5</code></pre></p> <p>我不想在每个页面上重复此代码。有没有办法把它写在一个地方？</p> <p>我尝试制作可组合项，但没有成功。</p> <p>知道我了解 <pre><code>nuxt.config.ts</code></pre> 方法，我可以添加 <pre><code>pageTransition</code></pre>，但 <pre><code>onEnter</code></pre> 等挂钩对我不起作用</p> <p><a href="https://stackoverflow.com/questions/78436318/global-pagetransition-hooks-not-working-nuxt-3">全局 pageTransition 挂钩不起作用 - Nuxt 3</a></p> </question> <answer tick="false" vote="0"> <p>为了避免重复，你有很多方法，你可以：</p> <ul> <li>使用可重用的函数</li> <li>使用抽象来包装你的东西</li> <li>动态页面</li> <li>在 Nuxt 布局之上使用 CSS 选择器</li> </ul> <p>DRY 是很多人没有特殊原因的目标，它实际上可能导致过早的优化。有些重复并不总是坏事。</p> </answer> </body></html>

Nuxt 3.众所周知的路线

我在让 nuxt3 在生产中为 /.well-known/apple-developer-merchantid-domain-association 路径提供服务时遇到问题。我正在尝试使用静态托管（cloudflare），但是当我部署专业版时...

Nuxt vue 基于参数/类型的显示组件

我对 Nuxt 和 Vuejs 相当陌生。我已经被困在这个问题上几天了，并且已经在谷歌上搜索了解决方案，但还没有找到任何.. 我有一个带有组件的页面 我对 Nuxt 和 Vuejs 相当陌生。我已经被这个问题困扰了几天了，已经在谷歌上搜索了解决方案，但还没有找到任何.. 我有一个带有组件<VTextField></VTextField>和<VSwitch></VSwitch>的页面，页面的示例代码如下 <script setup lang="ts"> import { ref } from 'vue'; </script> <template> <VTextField></VTextField> <VSwitch></VSwitch> </template> 但是，我没有直接使用组件，而是需要遵循一个要求，即我有一个 API 可以为我提供“类型”，并根据“类型”值显示组件。 我尝试为此创建一个函数，代码如下。 utils/RenderComponent.ts import { defineComponent } from 'vue'; import { VTextField } from 'vuetify/components'; import { VSwitch } from 'vuetify/components'; export function renderComponent(type: any) { switch (type) { case 'Text': return defineComponent({ components: { VTextField }, template: '<VTextField/>' }); case 'switch': return defineComponent({ components: { VSwitch }, template: '<VSwitch/>' }); default: throw new Error('Invalid component type'); } } 页面.vue <script setup lang="ts"> import { ref } from 'vue'; import { renderComponent } from '~/utils/RenderComponent'; </script> <template> <component :is="renderComponent('Text')" /> <component :is="renderComponent('Switch')" /> </template> 但是代码不起作用。我希望有人能提供帮助并提前谢谢您！ 您可以直接在模板中使用条件 <script setup lang="ts"> import { ref } from 'vue'; const componentType = ref('switch') </script> <template> <VTextField v-if="componentType === 'switch"></VTextField> <VSwitch v-else-if="componentType === 'textfield'"></VSwitch> .... </template>

在 nuxt.js 中设置 Google Analytics 4

我在使用 Nuxt 设置新的 Google Analytics 4 (GA4) 帐户时遇到问题。根据教程，一切似乎都配置正常，但是我的流量没有显示在 GA（开发和生产）中 在...

是否有必要在SSR模式下使用Nuxt Server作为我的外部Django API和Nuxt 3前端之间的中介？

我正在开发一个 SaaS 应用程序，使用带有 Django REST API 和 PostgreSQL 数据库的后端架构，而前端使用 Nuxt 3 以及 TypeScript、Tailwind 和 TanStack Query for API

Nuxt3 - NuxtLink 锚点在单击或页面刷新时不滚动

我只是想让页面滚动到 Nuxt3 中的锚点，但我无能为力。它不会在点击时滚动，也不会在使用网址中的锚点刷新页面时滚动。 我只是想让页面滚动到 Nuxt3 中的锚点，但我无能为力。它不会在点击时滚动，也不会在使用网址中的锚点刷新页面时滚动。 <nuxt-link :to="{path: '/', hash: '#projects'}">Let's go</nuxt-link> 尝试了一堆其他SO答案，将自定义scrollBehaviour代码添加到nuxtConfig不起作用，并且尝试在Nuxt3中安装vue-scrollTo在使用vue-scrollTo模块运行应用程序时给了我这个错误 错误无法重新启动 nuxt：序列化未定义 任何帮助将不胜感激！ 完整代码 <script setup> import '@/assets/css/main.css'; const { data } = await useAsyncData('home', () => queryContent('/').find()) const projects = data </script> <template> <div> <div class="flex flex-col h-screen"> <div class="lg:p-20 p-10 text-white bg-orange-500"> <p class="font-playfair lg:text-7xl text-4xl mb-5">Kia Ora, my name is <span class="font-medium italic">George Bates</span></p> <p class="font-lato lg:text-3xl text-xl mb-5">Content creator and web developer in Auckland, New Zealand</p> </div> <div class="lg:p-20 p-10 text-white flex flex-grow" style="background-image: url('images/header.jpg'); background-position: center; background-size: cover;"> <nuxt-link :to="{path: '/', hash: '#projects'}">Let's go</nuxt-link> </div> </div> <main class="lg:p-20 p-10" id="projects"> <p class="text-3xl font-playfair mb-5 font-semibold pb-2 text-orange-500">Some of my work</p> <Projects :projects="projects" /> </main> </div> </template> 您说您已经尝试添加自定义scrollBehavior，但您是如何做到的？ 我对 Vue 和 Nuxt 非常陌生，但是感谢 这个 Github 答案，你可以自定义滚动行为，这对我有用： 文件app/route.options.ts： import type { RouterConfig } from '@nuxt/schema'; // https://router.vuejs.org/api/#routeroptions export default <RouterConfig>{ scrollBehavior(to, from, savedPosition) { return { el: to.hash, behavior: 'smooth', }; }, }; （这里我放了一个平滑的行为，但默认似乎是auto） 并使用如下代码示例： ... <NuxtLink :to="{path: '/', hash: '#anchor'}">Let's go!</NuxtLink> ... 对我有用的更简单。只需将以下内容添加到 nuxt.config.ts 文件中： router: { options: { scrollBehaviorType: "smooth", }, }, 这就是您所需要的。 您可以在“哈希链接的滚动行为”标题下阅读官方 Nuxt3 文档的更多内容。 希望有帮助！

如何在nuxt 3中使用node js并编写后端？

如何在nuxt 3中使用node js并编写后端？ 如何在nuxt 3中使用node js并编写后端？ 如何在nuxt 3中使用node js并编写后端？ 如何在nuxt 3中使用node js并编写后端？ 如何使用 Node js 和

Nuxt.js 默认布局未应用

我是使用 Nuxt.js 的新手，并且遇到一个问题：当我创建项目时，布局文件夹没有按照文档自动生成。我手动添加了它，但是 default.vue 没有被 ap...

navigateTo 无法在插件中工作 - nuxt 3

问题简而言之：navigateTo 在defineNuxtRouteMiddleware 中工作，但在defineNuxtPlugin 中不起作用。我不想仅在网站中或进入网站的每个页面上运行此代码 导出默认

如何在Nuxt UI中动态选择原色？

我用 nuxtui 创建了一个新的 nuxt 项目，启动器看起来很棒。我可以看到在 app.config.ts 文件中设置了主颜色，如下所示，并更改了主属性的值...

i18n.locale 在 navigatorTo() 到另一个语言之后不会在中间件中更新 - nuxt 3

中间件有一个功能，如果用户选择的语言与当前语言不同，则更改语言。但问题是，当用户切换到想要的路径或 URL 后（...

如何检索服务器端插件

我编写了一个在服务器端使用的插件，并定义如下： 导出默认的defineNuxtPlugin((nuxtApp:any) => { const kafkaOptions：any = nuxtApp.$config.public.kafkaModule。

无法使用 vueform 读取 Vue 上 null 的属性（读取“nextSibling”）

有时，当我浏览时，我执行诸如返回或重新加载后的窗口之类的操作，我会收到此错误并显示空白屏幕，并且这些屏幕具有 vueform 组件，我确实...

Vue <teleport> 在 Nuxt

在设计客户端渲染SPA时，Vue3的效果很好。 我可以将对话框组件传送到 。 <--! dialog component example--> 在设计客户端渲染 SPA 时，Vue3 的 效果很好。 我可以将对话框组件传送到 。 <--! dialog component example--> <template> <teleport to="body"> <div class="dialog"> <slot></slot> </div> </teleport> </template> 但是，当我尝试在Nuxt静态模式下使用相同的方式时，却失败了。 Nuxt支持“传送”方法吗？ 在 Nuxt 静态应用程序中还有其他处理传送的解决方法吗？ Portals/Teleport 随 Vue 3 一起到来。Nuxt 尚不支持此功能，因为它仍在 v2 上运行。如果有必要，您可以同时找到替代的第三方软件包。 我可能会误解你在寻找什么，但一种解决方案是使用<ClientOnly>。大多数时候我们只需要在客户端渲染Modal（无需SSR）。 <template> <div class="modal_container"> <ClientOnly> <Teleport to="body"> <div class="modal"> Hello World </div> </Teleport> </ClientOnly> </div> </template> 在NuxtJS 3文档中编写： <Teleport> 的 to 目标需要一个 CSS 选择器字符串或实际的 DOM 节点。 Nuxt 目前仅支持传送到 body 的 SSR，并使用 client-side 包装器为其他目标提供 <ClientOnly> 支持。

如何使用Nuxt在html元素上设置lang属性？

使用 nuxt.config.js 文件，可以自定义头部内容以添加一些元数据或其他内容： 模块. 导出 = { /* ** 页面标题 */ 头： { title: '很棒的标题',

Vue i18n VS 代码片段

有没有一种方法可以轻松地将 i18n 字符串添加到 .vue 文件中？