nuxt.js 相关问题

Nuxt 3：如何从浏览器网络 Fetch/XHR 请求列表中隐藏服务器 api 调用请求？

我有 Nuxt 3 项目，有两个页面和一个服务器 api： 配置文件：nuxt.config.ts 导出默认的defineNuxtConfig({ 路线规则：{ '/api/**': { 缓存：{ maxAge：60 ...

Nuxt 3 渲染后按需 HTTP 请求：客户端获取

Nuxt 3 具有那些令人惊叹的数据获取功能（例如：useFetch），但我遇到了一种情况，我需要在渲染时间之后发出请求（例如：从按钮调用并发送搜索结果.. .

是否可以在我的独立 vue3 项目中使用 `nuxt-icon` 包？

我想使用此包 https://nuxt.com/modules/icon 提供的这些图标。 但从包导入会导致此错误： ReferenceError：进程未定义 我知道代码的目的是......

无效的组件名称：“pages/product/_slug.vue”。组件名称应符合 html5 规范中有效的自定义元素名称

我正在使用 Nuxt.js 并有一些动态路由。我的文件夹结构是这样的： - 页面 - 产品 - _slug.vue 我链接到这样的路线： 我正在使用 Nuxt.js 并有一些动态路由。我的文件夹结构是这样的： - pages - product - _slug.vue 我链接到这样的路线： <nuxt-link :to="{ name: 'product-slug', params: { slug: product.slug } }"> 它工作正常，它显示了正确的 URL，并且也可以很好地引导页面，但是，我在控制台中收到恼人的红色错误： [Vue warn]: Invalid component name: "pages/product/_slug.vue". Component names should conform to valid custom element name in html5 specification. 我发现了这个问题，但收效甚微：https://github.com/nuxt/nuxt.js/issues/165 如果组件中有名称，请删除名称之间的空格。例如 export default { name: 'Assign Role' } 更改为： export default { name: 'AssignRole', } 此错误信息的原因是_slug.vue组件的名称与文件名相同。 我期待它name='_slug.vue'你需要将其更改为这样的name='ProductItem' 我不确定这是一个错误还是什么。 但是在为我的组件命名后，按如下方式修复了此问题。 export default { name: 'NameOfTheCompnent', ... } 如果您使用带有 vue-property-decorator 的 vue 2.x，当 vue 组件的类如下所示时，可能会出现此问题： @Component({}) export default class MyComponent extends Vue { ... } 您应该删除 ({}) 或为 name 字段设置特定值 - @Component 或 @Component({ name: 'MyComponent' })。 当我在组件列表中使用方括号时，我得到了这个错误，我花了很长时间才发现它，因为所有错误都会导致其他地方。 错了！ export default { name: "WelcomeScreen", components: [ Welcome_Ready, ], } 右 export default { name: "WelcomeScreen", components: { Welcome_Ready, }, }

如何在Nuxt 3中通过全局中间件实现维护模式？

我正在尝试在我的 Nuxt 3 应用程序中实现维护模式。我创建了一个中间件（maintenance.global.ts），我想在每个页面调用和更改上运行它，无论是通过 nux...

Nuxt3 Options API：为什么我不能在设置函数中使用可组合项？

我有Options API组件： 导出默认定义组件（{ 名称：“我的组件”， 异步设置() { console.log(等待 useFetch('http://localhost/api/data')); }, }) 当我尝试时...

vue 3 从数组中观察特定对象的项目

我正在开发 nuxt 3 (vue 3)，我需要从数组中观察特定对象的特定项目。 我的阵列 const formData = 反应式({ 详细地址： [ { 地址：“&...

行突出显示在 Nuxt Content 和 ShikiJS 中不起作用

我使用最新版本的Nuxt Content。这是我的配置 // https://nuxt.com/docs/api/configuration/nuxt-config 导出默认的defineNuxtConfig({ 开发工具：{ 启用：真， }, 内容：...

Nuxt js 外部多个模板js/css 文件导入错误

我的问题是我可以尝试我的模板导入所需的js和css文件，但不起作用我尝试一些像这样的道路 导出默认值{ 头（） { 返回 { 关联： [ {相对：'</desc> <question vote="0"> <p>我的问题是我可以尝试我的模板导入所需的js和css文件，但不起作用我尝试一些像这样的道路</p> <pre><code>&lt;script&gt; export default { head() { return { link: [ { rel: &#39;stylesheet&#39;, href: &#39;/assets/css/vendor/vendor.min.css&#39; }, { rel: &#39;stylesheet&#39;, href: &#39;/assets/css/plugins/plugins.min.css&#39; }, { rel: &#39;stylesheet&#39;, href: &#39;/assets/css/style.min.css&#39; } ], script: [ { src: &#39;/assets/js/vendor/vendor.min.js&#39;, body: true }, { src: &#39;/assets/js/plugins/plugins.min.js&#39;, body: true }, { src: &#39;/assets/js/main.js&#39;, body: true } ] } } } &lt;/script&gt; </code></pre> <pre><code>const stylesheets = [ &#34;/assets/css/vendor/vendor.min.css&#34;, &#34;/assets/css/plugins/plugins.min.css&#34;, &#34;/assets/css/style.min.css&#34;, ]; stylesheets.forEach(stylesheet =&gt; { let linkTag = document.createElement(&#39;link&#39;); linkTag.setAttribute(&#39;rel&#39;, &#39;stylesheet&#39;); linkTag.setAttribute(&#39;type&#39;, &#39;text/css&#39;); linkTag.setAttribute(&#39;href&#39;, stylesheet); document.head.appendChild(linkTag); }); </code></pre> <p>我尝试导入一些外部文件，但在我的页面上不起作用，我需要应该是我的代码的工作</p> </question> <answer tick="false" vote="0"> <p>您可以尝试在 nuxt.config.js 文件中使用它吗？</p> <pre><code>export default { css: [ &#39;~/assets/css/vendor/vendor.min.css&#39;, &#39;~/assets/css/plugins/plugins.min.css&#39;, &#39;~/assets/css/style.min.css&#39; ], script: [ &#39;~/assets/js/vendor/vendor.min.js&#39;, &#39;~/assets/js/plugins/plugins.min.js&#39;, &#39;~/assets/js/main.js&#39; ] } </code></pre> <p>或者如果这不起作用，请使用 post-css import</p> <pre><code>&lt;style&gt; @import &#39;~/assets/css/vendor/vendor.min.css&#39;; @import &#39;~/assets/css/plugins/plugins.min.css&#39;; @import &#39;~/assets/css/style.min.css&#39;; @import &#39;~/assets/js/vendor/vendor.min.js&#39;; @import &#39;~/assets/js/plugins/plugins.min.js&#39;; @import &#39;~/assets/js/main.js&#39;; &lt;/style&gt; </code></pre> <p>如果其中任何一个对您有用，请将此答案标记为“已接受”</p> </answer> </body></html>

Laravel Sanctum + Nuxt JS 我无法通过 CORS

在开始之前，我想说我搜索并尝试了很多方法，但似乎没有一个能正常工作。我还创建了一个新的 Laravel 安装，但仍然没有成功。 问题是COR...

Nuxt 3：嵌套动态路由未按预期预渲染

我正在开发一个 Nuxt 3 项目，目标是在构建时预渲染每个页面，除了特定的动态路由（例如我的商店和产品页面），它们应该始终是动态的。我是

隐藏选择组件中的箭头 shadcn-vue

嗨朋友们，我如何隐藏Vue-Shadcn中选择组件中的箭头 ... 嗨朋友们，我如何隐藏 Vue-Shadcn 中选择组件中的箭头 <div class="relative w-full items-center border rounded-md "> <div class="ps-10"> <Select v-model="userInformation.user.gender"> <SelectTrigger class="border-none focus:ring-0 focus:ring-offset-0 " > <SelectValue /> </SelectTrigger> <SelectContent> <SelectGroup> <SelectItem v-for="item in gender" :key="item.id" :value="item.value"> {{ item.name }} </SelectItem> </SelectGroup> </SelectContent> </Select> </div> <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2"> <Icon size="24" class="text-muted-foreground" name="material-symbols:male-rounded" /> </span> </div> 我尝试 isArrow='false' 是 SelectTriger 但它不起作用 您可以做到这一点的最佳 2 种方法： 修改您的 SelectTrigger 您可以删除该 svg 或有条件地渲染它 路径：ui > select > SelectTrigger.vue 使用一级顺风级 <div class="relative w-full items-center rounded-md border"> <div class="ps-10"> <select v-model="userInformation.user.gender"> <SelectTrigger class="border-none focus:ring-0 focus:ring-offset-0 [&_svg]:hidden"> <SelectValue /> </SelectTrigger> <SelectContent> <SelectGroup> <SelectItem v-for="item in gender" :key="item.id" :value="item.value"> {{ item.name }} </SelectItem> </SelectGroup> </SelectContent> </select> </div> <span class="absolute inset-y-0 start-0 flex items-center justify-center px-2"> <Icon size="24" class="text-muted-foreground" name="material-symbols:male-rounded" /> </span> </div> 变化： 将[&_svg]:hidden添加到SelectTrigger的班级列表中，了解更多这里

您可以通过具有机密访问类型的 Keycloak 客户端对 Nuxt.js 应用程序进行身份验证吗？

我正在通过 Nuxt.js 的身份验证模块使用 Keycloak 验证我的 Nuxt 应用程序。 （https://auth.nuxtjs.org/） 当我的 Keycloak 客户端的访问类型设置为公共时，一切都正常工作

Vue 3 v-model 无法与 Nuxt.js 中的自定义输入组件一起使用

我正在尝试将自定义 Vue 输入组件与 v-model 一起使用，但该值未在父组件中更新。我正在使用 Vue 3 和 Nuxt.js。 这是我的自定义输入组件： 我正在尝试将自定义 Vue 输入组件与 v-model 一起使用，但该值没有在父组件中更新。我正在使用 Vue 3 和 Nuxt.js。 这是我的自定义输入组件： <template> <input type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" :placeholder="placeholder" class="border border-gray-300 rounded-lg w-full p-2 text-black m-1" /> </template> <script setup> const props = defineProps({ modelValue: String, placeholder: String, }); const emit = defineEmits(["update:modelValue"]); </script> <script> export default { name: "MyInput", }; </script> 这是我在父组件中使用它的方式： <template> <div> <MyInput v-model="inputValue" placeholder="Enter a value" /> </div> </template> <script> import MyInput from "./MyInput.vue"; export default { name: "MyParentComponent", components: { MyInput, }, data() { return { inputValue: "", }; }, }; </script> 当我在输入字段中键入内容时，inputValue 数据属性不会更新。有人可以帮我找出我做错了什么吗？ 我有一个没有 Nuxt.js 的 Vue 3 项目，使用完全相同的代码，并且它可以在那里工作。 老兄，正在工作！您可以查看这里。 尽管我们没有明确定义 modelValue 的发射。

如何在Nuxt2和3中获取页面中的路由url参数？

我正在使用 Nuxt.js，并且有一个定义在下的动态页面 页面/post/_slug.vue 所以，当我访问页面网址时，例如 http://localhost:3000/post/hello-world，我如何读取这个 slug 参数...

Nuxt 3 和 tailwindCSS

我正在学习 nuxt 3 和 taillwindcss 如果我在 tailwind.config.js 中添加 bagroundImages 作为扩展 第一种方法 主题： { 延长： { 颜色： { 深蓝色：“hsl(217, 28%, 15%)”...

如何在 Ionic/Nuxt 应用程序中进行 SSR？

我正在尝试在 Nuxt 3 项目中使用 ionic 模块（https://www.npmjs.com/package/@nuxtjs/ionic）进行混合应用程序开发。在我安装了 @nuxtjs/io 后，SSR 就不再工作了...

无法访问我的 nuxt 3 可组合项中的 env 文件配置，且没有类型未定义的错误

我有 Nuxt3-Wordpress REST API 项目（Typescript）。 我正在使用“@woocommerce/woocommerce-rest-api”：“^1.0.1”，“@types/woocommerce__woocommerce-rest-api”：“^...

nuxtjs中有没有办法用axios缓存JSON数据？

你好，我有一个简单的 get 请求来从 json 获取数据。我在我的应用程序的几个地方使用它。数据不经常更改，那么有没有一种简单的方法如何仅针对此请求缓存此 json？ 那个...

知道如何使用 nuxt 制作浏览器扩展吗？

我第一次在这里问一些事情，所以我希望我说得足够清楚！ （不要评判我......） 我需要构建一个网络扩展，但由于与我公司的工作方式相关的许多原因，我需要这样做......