标签: nuxtjs3
如何将微前端与 Vue/Nuxt 结合使用？
我想知道如何将微前端与 Nuxt 或至少 Vue 一起使用。
是否有一种即插即用的简单解决方案可以使其快速工作？例如，
我听说过Webpack 的 v5 ModuleFederationPlugin ，这是启动我的 Nuxt 项目的有效方法吗？
推荐指数
解决办法
查看次数
如何从Nuxt 3服务器获取路由参数
我有以下 API URL 之一。归根结底，对于我的用例来说，我必须使用这些 URL 中的哪一个并不重要，但目前两者都不起作用。
http://localhost:3000/api/track/TRACKID
或者
http://localhost:3000/api/track?id=TRACKID
我如何获取TRACKIDAPI 代码？以下代码的结果是undefined.
export default async (req: IncomingMessage, res: ServerResponse) => {
console.log(req.id);
};
我尝试按照以下方式设置第一个 URL 的文件，但也没有成功。它只是导致 URL 变成http://localhost:3000/api/track/[id]
PROJECT/server/api/track/[id].ts
对于第二个 URL，我使用了以下设置。
PROJECT/server/api/track.ts
推荐指数
解决办法
查看次数
Nuxt 3应用程序与tailwind css如何编辑主体元素？
我正在 NuxtJS 和 Tailwindcss 的帮助下学习 VueJS，用于一个业余爱好项目。由于 tailwindcss 使暗模式编辑变得非常容易，所以我在 safari 浏览器上遇到了问题。
每当您在深色模式下向下或向上滚动或拖动浏览器时，您总是会看到白色背景。这就是身体，我无法改变它。
我尝试的是将 Body 标记添加到我的主应用程序 VueJS 文件中，在其中组合组件来构建页面。但这会导致主应用程序 Div 内出现一个 Body 标记。这意味着我有两个像这样的身体标签
<body> -> Main body from the Nuxt app
<Div> -> div to wrap components in
<body> -> Body that i added in the main Vue app file (its double)
</body>
</div>
</body>
如果我查看 tailwind 网站并检查该网站，我会发现该网站在其主要 Body 元素上使用了 Tailwindcss 类。
我的问题是这个放在哪里？或者我如何访问它。
推荐指数
解决办法
查看次数
如何在Nuxtjs 3中的POST请求中发送表单数据
我正在开发一个静态网站，但我需要联系表单，该表单应该将表单数据发送到电子邮件，我使用 nuxtjs 3，已尝试使用useFetch()，我也尝试使用axios。
这是我所拥有的
联系 Vue 模板
<template>
<section id="ng-ctt" class="ng-ctt">
<div class="ng-ct">
<div class="ng-fx">
<div class="ng-fx6-m">
<figure class="ng-ctt-img">
<img src="~/assets/media/illustrations/contact.svg" alt="ctt img" class="ng-img">
</figure>
</div>
<div class="ng-fx6-m">
<div class="ng-fxc">
<div class="ng-ctt-text">
<span class="ng-title">Mail</span>
<NuxtLink to="mailto:hi@paddi.ng" class="ng-link">hi@paddi.ng</NuxtLink>
</div>
<div class="ng-ctt-text">
<span class="ng-title">Location</span>
<span class="ng-text">Lagos, Nigeria</span>
</div>
<div class="ng-ctt-text">
<span class="ng-ctt-text-or">OR</span>
</div>
<form @submit.prevent="submitForm" id="ng-fm" class="ng-fm">
<div class="ng-fm-row">
<input type="text" v-model="formData.full_name" class="ng-inp" placeholder="Full Name">
</div>
<div class="ng-fm-row">
<input type="text" v-model="formData.email" class="ng-inp" placeholder="Email">
</div>
<div class="ng-fm-row">
<input type="text" …推荐指数
解决办法
查看次数
Nuxt 3 包导入说明符“#internal/ninto”未定义
我尝试使用命令安装新版本的Nuxt.js：
npx nuxi init nuxt-app
然后尝试在 Nuxt 3 中运行和项目工作正常。但是当我尝试运行这个命令时：
npm run generate
获取此错误消息：
错误[nuxt] [请求错误]从 C:\Users\Andreas\Projects\nuxt3 导入的包 C:\Users\Andreas\Projects\nuxt3-app\package.json 中未定义包导入说明符“#internal/nitro” -app.nuxt\dist\server\server.mjs 在新的 NodeError (node:internal/errors:371:5) 在 throwImportNotDefined (node:internal/modules/esm/resolve:442:9) 在 packageImportsResolve (node:internal/模块/esm/resolve:819:3) 在 moduleResolve (节点:internal/modules/esm/resolve:973:21) 在 defaultResolve (节点:internal/modules/esm/resolve:1080:11) 在 ESMLoader.resolve (节点:internal/modules/esm/loader:530:30) 在 ESMLoader.getModuleJob (节点:internal/modules/esm/loader:251:18) 在 ModuleWrap。（节点：内部/模块/esm/module_job：79：40）在链接（节点：内部/模块/esm/module_job：78：36）
我的package.json源代码：
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview"
},
"devDependencies": {
"nuxt": "3.0.0-rc.1"
}
}
- 节点版本：16.14.1
- NPM版本：8.5.0
推荐指数
解决办法
查看次数
使用 vitest 测试 Nuxt3 内的 Pinia 存储会抛出“useRuntimeConfig”未定义
我正在nuxt3应用程序中测试 pinia 商店。
在商店内部setup()，我用来useRuntimeConfig从公共配置变量中获取计数器的初始值，但出现此错误，ReferenceError: useRuntimeConfig is not defined不知道如何解决
// store/counter.ts
...
state: () => {
const runtimeConfig = useRuntimeConfig()
const count = runtimeConfig.public.count
return {
...
count
...
}
},
...
代码
// store/counter.test.ts
import { fileURLToPath } from 'node:url'
import { describe, expect, it, beforeEach } from 'vitest'
import { setActivePinia, createPinia } from 'pinia'
import { useCounter } from './counter'
import { setup } from '@nuxt/test-utils'
await setup({
rootDir: fileURLToPath(new …推荐指数
解决办法
查看次数
Nuxt3 useFetch 仅发送一次请求
<script setup lang="ts">
const loadPost = () => {
console.log('load')
const { data, pending, error, refresh } = useFetch(
'https://jsonplaceholder.typicode.com/posts',
{
method: 'POST',
body: {
title: 'foo',
body: 'bar',
userId: 1,
},
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
})
console.log(data)
}
</script>
<template>
<div class="max-w-xs space-y-4 mx-auto mt-4">
<button @click.prevent="loadPost">Load post</button>
</div>
</template>
点击加载按钮后，我通过控制台日志看到每次请求都被处理，但是我在网络chrome devtools中没有看到新的请求，我每次都需要从服务器接收响应，我该怎么办这？
注意：如果我使用常规fetch()，那么每次都会发送请求，因为它应该是
我的 nuxt 版本 - 3.0.0-rc.1
推荐指数
解决办法
查看次数
Laravel 9：使用 Fetch API 登录 Sanctum 不起作用
环境
- 圣所版本：v2.15.1
- 强化版本：v1.13.0
- Laravel 版本：v9.17.0
- PHP版本：PHP 8.1.6
- 数据库驱动程序和版本：基于 Laravel Sail (docker): image: 'mysql:8.0'
描述：
我正在尝试让我的网络应用程序的登录流程正常工作。该 Web 应用程序是使用 Nuxt 3 作为在 http://localhost:3000 上运行的前端 (SPA) 和 Laravel 作为在 http://localhost 上运行的后端编写的。
因为 Nuxt 3 使用 fetch API，而 axios 目前不适用于 Nuxt 3，所以我试图让 Laravel Sanctum 的登录流程和 fetch API 正常工作。
重现步骤：
我在前端 Nuxt 应用程序上使用可组合函数调用 Laravel 后端，如下所示：
export const useLogin = async (email, password) => {
const config = useRuntimeConfig()
const tokenResponse = await $fetch(config.baseURL + '/sanctum/csrf-cookie', {
method: 'GET',
credentials: 'include'
})
const token = getCookie('XSRF-TOKEN') …推荐指数
解决办法
查看次数
NUXT 3：如何在布局中使用路由中间件？（我可以吗？）
我一直在寻找在布局中使用 Nuxt 中间件。但我不确定我是否可以，但是，因为我在Nuxt 2中使用了它，所以在Nuxt 3中可能是可能的。
该项目有 2 种不同的布局：Public.vue和Admin.vue。我只想在使用管理布局的页面中使用中间件。因为使用它的页面只能由登录用户访问，并且它将在中间件内部进行检查。
我尝试过这个（不起作用）：
管理布局| 管理.vue
<template>
<div>
<client-only>
<admin-header />
</client-only>
<main>
<slot />
</main>
<client-only>
<admin-footer />
</client-only>
</div>
</template>
<script lang="ts">
import AdminHeader from "~~/components/admin/Header.vue"
import AdminFooter from "~~/components/admin/Footer.vue"
definePageMeta({
middleware: "admin-auth"
});
</script>
中间件| adminAuth.ts
export default defineNuxtRouteMiddleware((to, from) => {
console.log(to);
console.log("Acessando o admin auth middleware");
})
推荐指数
解决办法
查看次数
在生产环境中，Socket.io websocket 在 Nuxt 3 中无法工作
我正在 Nuxt 3 应用程序中创建一个 socket.io 实现。当我处于开发模式时，websockets 可以工作，但我收到此错误消息。我使用的是 Nuxt 版本 nuxt v3.0.0-rc.8，这是我的 nuxt.config.ts 文件的样子：
import { defineNuxtConfig } from 'nuxt';
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
css: [
'primevue/resources/themes/saga-blue/theme.css',
'primevue/resources/primevue.css',
'primeicons/primeicons.css'
],
build: {
transpile: [
'primevue'
],
},
modules: [
'./modules/socket'
]
})
这是我的 module/sockets.ts 文件的样子：
import { Server } from 'socket.io';
import { defineNuxtModule } from '@nuxt/kit';
export default defineNuxtModule({
setup(_, nuxt) {
console.log('Socket Read');
nuxt.hook('listen', (server) => {
console.log('Socket listen', server.address(), server.eventNames())
const io = new Server(server) …推荐指数
解决办法
查看次数