Nuxt.js是一个用于创建Vue.js应用程序的框架,您可以选择Universal,Static Generated或Single Page应用程序(受Next.js启发)
我正在研究 Nuxt2,使用 Vuetify 作为我的 UI 库。这是我想要实现的目标: 一些内容 我正在研究 Nuxt2,使用 Vuetify 作为我的 UI 库。这是我想要实现的目标: <template> <component :is="someCondition ? 'v-dialog':'v-card'"> Some Content </component> </template> 这在本地有效,但不适用于生产。在生产环境中,v-dialog 和 v-card 不会像往常一样显示。我在 GitHub 上阅读了this issue,我推断这可能不起作用,因为“v-dialog”和“v-card”没有正确注册。所以我将代码更改为: <template> <component :is="someCondition ? 'v-dialog':'v-card'"> <v-dialog v-if="false"> <v-card v-if="false"> Some Content </component> </template> 然而,这也没有用。我现在不确定如何才能完成这项工作。将不胜感激任何帮助。谢谢
让 Nuxt3 与 AWS Lambda + Docker 一起工作
所以我已经成功地让 Nuxt3 在 AWS Lambda 上运行,但是在过去的几天里我一直遇到问题让它与 Docker 镜像一起很好地工作。我遇到问题的部分是......
从本地主机 Jupyter notebook 发送 json 数据到 vue 页面
我有一个本地主机 jupyter notebook python 文件,我正在尝试将数据发送到我的 api/python/index.ts 文件,并使用 useFetch('/api/python/') 从我的 index.vue 页面获取所述数据但我收到...
我正在开发一个网络应用程序,该应用程序绘制美国地图并根据财务数据和滑块选择的年份范围为其着色。技术上,画了三张图,有三个
我正在迭代我的 v-list-item 并尝试使用 assets 文件夹中的图像,使用 prepend-avatar 道具,但似乎无法显示它。我正在使用 vuetify 3 和 nuxt 3。 这是我的 v-list-item 我正在迭代我的 v-list-item 并尝试使用 prepend-avatar 道具使用我的资产文件夹中的图像,但似乎无法显示它。我正在使用 vuetify 3 和 nuxt 3. 这是我的v-list-item <v-list-item link v-for="item in navLinks" :key="item.index" prepend-avatar="item.icon" :title="item.title" :value="item.value" :to="item.path" > </v-list-item> 我正在迭代的数组 navLinks: [ { icon: "@/assets/images/icons/image1.png", title: "Link 1", value: "link 1", path: "/", }, { icon: "@/assets/images/icons/image2.png", title: "Link 2", value: "link 2", path: "", }, { icon: "@/assets/images/icons/image3.png", title: "Link 3", value: "link 3", path: "", }, { icon: "@/assets/images/icons/image4.png", title: "Link 4", value: "link 4", path: "", }, ]; 而不是使用assets文件夹来存储图像。如果你想存储静态文件,我建议使用public文件夹。 Nuxt 提供的有关assets 和public 文件夹的更多信息这里 要访问代码中的public文件夹,只需使用/. 我已经测试过它并且有效。见例子 https://stackblitz.com/edit/nuxt-starter-pc7usa?file=app.vue 注意: 公共文件夹内不要存放敏感文件
(以上数据来自json) 我需要从 Nuxt 3 中的 JSON 获取站点标题的数据。 我无法获得像“api.title”这样的数据。我的示例代码: const { data: api } = a...</desc> <question vote="-1"> <p><a href="https://i.stack.imgur.com/Q0DJL.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL1EwREpMLnBuZw==" alt=""/></a></p> <p>(以上数据来自json)</p> <p>我需要从 Nuxt 3 中的 JSON 中获取站点标题的数据。</p> <p>我无法获取像“api.title”这样的数据。我的示例代码:</p> <pre><code> <script setup> const { data: api } = await useFetch(useRuntimeConfig().public.home) useServerSeoMeta({ title: api.title, description: 'This is my amazing site, let me tell you all about it.', }) </script> </code></pre> <p>如何从JSON获取数据?</p> </question> <answer tick="false" vote="0"> <p>我不认为<pre><code>useServerSeoMeta</code></pre>存在于nuxt 3中。您是否尝试过使用<pre><code>useHead</code></pre>可组合?此可组合项允许您以编程方式和反应式管理您的 head 标签。有关<a href="https://nuxt.com/docs/api/composables/use-head" rel="nofollow noreferrer">文档</a></p>的更多详细信息 <p>示例用法,根据来自<pre><code>useFetch</code></pre>可组合</p>的数据响应显示元标题 <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>useHead({ title: data.value[0].title, });</code></pre> </div> </div> <p></p> <p>为了查看实际效果,我创建了一个 stackblitz 示例。数据来自服务器文件夹,但使用 <pre><code>useRuntimeConfig</code></pre> 可组合项访问它。我基于你的代码。 Stackblitz 链接<a href="https://stackblitz.com/edit/nuxt-starter-uexjsa?file=pages/index.vue" rel="nofollow noreferrer">https://stackblitz.com/edit/nuxt-starter-uexjsa?file=pages/index.vue</a></p> <p>检查元素示例以查看已更新的元标题。这是屏幕截图 <a href="https://i.stack.imgur.com/PLAw0.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL1BMQXcwLnBuZw==" alt=""/></a></p> </answer> </body></html>
我已经使用 nuxt 和 vuetify 构建了一个 web 并使用了一个非常简单的代码,尽管我在 lighthouse 中得分很低并且出现以下错误 有一些问题影响了这次 Light 的运行......
nuxt npm run build 有问题。 Npm run dev 工作正常,但是当我运行 npm run build 并启动时,大部分站点都丢失了
我在 NUXT 版本 2.0.0 中构建了我的第一个应用程序,它访问 firestore 数据库和语音识别,它在 npm run dev 上运行良好。 当前 package.json 文件: { “名字”:&qu...
我有一个使用 Nuxt 3 重建的网站。反向链接存在于许多平台上,我需要旧链接指向新页面。 例子: 旧的(website.com/contact.html)新的(website.com/
Nuxt+Netlify 主页恢复为 SSR / 仅客户端模式
我站点中包括动态路由在内的所有页面都是静态生成的,当您查看源代码时,您会正确地看到所有预期的标记。但由于某种原因,主页仅在客户端模式中......
我想像访问 Nuxt2 中间件一样访问 Nuxt3 路由中间件中的 req 对象。 这是代码: Nuxt2 // 中间件/auth.js 导出默认值 ({ store, req }) => { 如果(要求){ 小...
CSRF 令牌不匹配 Laravel 10 和 NuxtJS
我的设置的主要问题是我无法使用 axios 发出请求。总是因为 CSRF 令牌不匹配而得到 419,不知道该怎么办,查看了谷歌上的每篇文章,使用 axios 的示例请求:
我有一个添加了 JSON 内容字段的产品内容类型。 在创建/更新产品时,它应该使用该产品的创建 ID 和位于
我想通过使用 nuxt 页面以特定结构创建 url,例如: 父文件夹/关于/名称 父文件夹中没有 index.vue 文件。我的问题是如果你导航到 url...
我刚刚将我在vue 3中创建的项目迁移到nuxt 3。以前我使用vue-toastification模块但现在我不知道如何正确导入它。我的代码使用这个模块。 导入 { useToast,
如何在 nuxt 中使用 google auth 时启用帐户选择?
我在 nuxt.config.js 的 Nuxt 中使用以下代码进行我的 Google 身份验证设置 谷歌: { clientId: process.env.CLIENT_ID, 代码挑战方法:'', 响应类型:'代码', 端点:{ ...
Nuxt storybook - 添加google maps等脚本
我正在将 Google 地图组件添加到我的 Nuxt 故事书项目中,但我正在努力注册地图 API。我已经尝试将它添加到 nuxt.config.js 的“头部”以及直接加载它......
我正在创建一个博客。 我创建了一个动态页面 [blog] .vue。 此时,对于每个页面,我使用 useAsyncData 获取数据。 到目前为止一切正常。 但是,我需要将每篇文章与...相关联
我目前正在 nuxt 3 中创建一个应用程序。这个应用程序只有一个任务: 获取并解析请求url 通过 API 将请求 url 参数传递给其他应用程序 根据响应有条件地呈现页面之一 在...
我有 Nuxt JS 项目。我无法向我在本地主机上运行的 Node js 项目发出请求。它在网络部分给出 Cors 错误。我可以使用 Postman 发送请求,但不能从项目发送请求。我加了...