标签: nuxtjs3

当开始使用 nuxt 3 时，它默认创建 TypeScript 项目。有没有办法转移到 JavaScript？

我努力了：

1. 重命名nuxt.config.ts为nuxt.config.js
2. 删除tsconfig.json
3. 添加jsconfig.json

内容nuxt.config.js

export default {
};

的内容package.json

{
  "private": true,
  "scripts": {
    "dev": "nuxi dev",
    "build": "nuxi build",
    "start": "node .output/server/index.mjs"
  },
  "devDependencies": {
    "nuxt3": "latest"
  }
}

该文件夹仍然.nuxt创建 TypeScript 文件

我刚刚开始学习 nuxtjs （有一些 vue.js 经验），我遇到了以下问题：

我有一个简单的todo-[id].vue页面。它应该从 API 获取待办事项并在页面上呈现：

<script setup>
import Section from '~~/components/UI/containers/section.vue';
import ButtonLink from '~~/components/UI/buttons/button-link.vue';

const route = useRoute()
const todoId = parseInt(route.params.id)
const { data: todo } = await useFetch(`https://jsonplaceholder.typicode.com/todos/${todoId}`)
</script>

<template>
  <Section>
    <div class="mt-4 flex space-x-4">
      <ButtonLink :to="{name: 'todo-id', params: {id: todoId - 1}}" type="secondary" v-show="todoId !== 1">previous</ButtonLink>
      <ButtonLink :to="{name: 'todo-id', params: {id: todoId + 1}}">next</ButtonLink>
    </div>
    <div class="mt-6">
      <p class="text-lg" :class="[todo.completed ? 'text-green-600' : 'text-red-600']">{{ todo.title }} (#{{ todo.id }})</p>
    </div>
  </Section> …

如何在 Nuxt 3 中完成嵌套抓取？我有两个 API。第二个 API 必须根据第一个 API 返回的值来触发。

我尝试了下面的代码片段，但它不起作用，因为page.Id在null调用它时。我知道第一个 API 返回有效数据。所以我猜想在第一个 API 返回结果之前会触发第二个 API。

<script setup>
  const route = useRoute()
  const { data: page } = await useFetch(`/api/page/${route.params.slug}`)
  const { data: paragraphs } = await useFetch(`/api/page/${page.Id}/paragraphs`)
</script>

显然这是一个简单的尝试，因为没有检查第一个 API 是否实际返回任何数据。它甚至没有等待响应。

在 Nuxt2 中，我会在里面放置第二个 API 调用.then()，但对于这个新的 Composition API 设置，我有点无能为力。

我用来useFetch获取一个字符串数组string[]，并可以transform选择将其从数组转换为对象。

我尝试了下面的代码：

type ReceivedData = [string, string, string];

interface TransformedData {
    prop1: string,
    prop2: string,
    prop3: string
}

const { data, error } = await useFetch<ReceivedData>(
    `./jsonPath.json`,
    {
      transform: ([prop1, prop2, prop3]: ReceivedData): TransformedData  => ({
         prop1, prop2, prop3
      })
    }
);

我收到这个错误

Type '([prop1, prop2, prop3]: ReceivedData) => TransformedData' is not assignable to type '(res: ReceivedData) => ReceivedData'.

我很确定我在这里弄乱了一些东西，但是 Typescript 期望转换方法返回它接收到的相同数据类型。

我面临一些问题。我想实现站点地图生成，并且我使用@nuxtjs/sitemap来生成站点地图，但似乎这个包目前不支持 nuxt3，并且在互联网上没有找到解决方案，有谁知道如何为 Nuxt3 应用程序实现站点地图。

我是 nuxt 新手，在 nuxt 项目上配置 HMR websocket 连接并在 Gitpod 中运行时遇到问题。项目使用nuxt 3 + vite。

运行后，yarn dev开发服务器在端口 3000 上运行，前端尝试通过 websocket 连接到在端口 上运行的 vite 开发服务器24678。

不幸的是，服务器通过反向代理和 https 端点暴露在 Gitpod 环境中。因此，内部服务器在定义的端口上运行，并在不同的 SSL 端点上公开公开，例如https://3000-CONTAINER_ID.gitpod.io/和https://24678-CONTAINER_ID.gitpod.io/。但 HMR 默认情况下会尝试连接到ws://3000-CONTAINER_ID.gitpod.io:24678/_nuxt/.

我尝试在 nuxt 上调整 vite HMR 配置，但我不走运。我最接近我想要实现的目标是这个配置：

export default defineNuxtConfig({
    ...
    server: {
      hmr: {
        protocol: 'wss',
        clientPort: 443,
      },
      proxy: {
        '/_nuxt': 'http://localhost:24678/_nuxt',
      }
    },
    ...
});

这样，前端中的 websocket URL 看起来是正确的，是：wss://3000-CONTAINER_ID.gitpod.io/_nuxt/，但我得到一个WebSocket connection to ... failed.结果 …

我正在尝试从 nuxt 3 中的资源加载 favicon，但它不起作用，除非我在它前面硬编码 _nuxt。我的配置看起来像这样并且有效：

    export default defineNuxtConfig({
        app: {
            head: {
                link: [{ rel: 'icon', type: 'image/png', href: '_nuxt/assets/favicon.png' }]
            }
        },

但根据文档，它应该是这样的：

    ~assets/favicon.png

或者

    ~/assets/favicon.png

但两者都不起作用。
有什么方法可以按照记录执行此操作还是这是一个错误？

附加信息：如果使用 vue 组件中的链接，它可以工作，并且如果我将其显示在页面上，则 favicon 会正确加载。

我创建了一个简单的复制品以更好地解释自己。我有：

-| pages/
---| test/
------| index.vue
------| nested.vue

我有一个导航栏，阅读了文档后，我假设如果我 NuxtLink 到/test或/test/nested.vue然后我会将router-link-activecss 类应用于导航栏中的两者，但它似乎没有这样做。

该文档似乎建议您应该将内容布局为：

-| pages/
---| parent/
------| child.vue
---| parent.vue

我尝试过，但不起作用 - 孩子永远不会被渲染（除非我<NuxtPage>向parent.vue添加另一个，这不是我想要的，因为这会显示父母和孩子的内容。

此处复制：https ://stackblitz.com/edit/nuxt-app-config-t3nvjv?file=app.vue

非常感谢您的帮助。

在我的 Nuxt3 项目中，我有一个非常基本的登录页面，它是 SSR，如下所示：

页面/login.vue

<template>
    <form
        @submit.prevent="login">
        <input
            name="email"
            v-model="form.email"/>
        <input
            name="password"
            v-model="form.password"/>
        <button>login</button>
    <form>
</template>

<script setup>
import { useAuth } from '~/store/auth.js'; 

const auth = useAuth();
const form = ref({email: '', password: ''});
const router = useRouter();

const login = async () => {
    useFetch('/api/auth/tokens', {
        method: 'POST',
        body: form.value
    })
    .then(({ data }) => {
          const { token, user } =  data.value;
          auth.setUser(user);
          auth.setToken(token);
          router.push('/profile');           
    })
}
</script>

1. 首先，我尝试像 SPA 页面一样测试它：

import { describe, test, expect …

我在 Nuxt 3 中遇到一个问题，即在中间件中导航后布局无法正确更新，特别是在登录页面和其他页面使用单独的布局时。以下是设置概述：

我有一个处理身份验证和导航的中间件。这是代码的简化版本：

import { useAuthStore } from "~/stores/auth";

export default defineNuxtRouteMiddleware((to, from) => {
  if (process.server) return;

  let authStore = useAuthStore();
  authStore.checkAuth();

  if (to.path === "/protected") {
    if (!authStore.isAuthenticated) {
      return navigateTo("/sign-in");
    }
  }
});

在此代码中，如果用户未经过身份验证，我使用 navigatorTo 函数重定向到“/sign-in”页面。

我遇到的问题是，导航到“/sign-in”页面后，布局无法正确更新。具体来说，不会应用登录布局，而是保留上一页的布局。

我在 Nuxt 项目中定义了单独的布局，其中一种布局用于登录页面，另一种布局用于其余页面。我怀疑问题在于中间件导航期间如何处理布局。

我已经验证身份验证逻辑和导航工作正常。但是，导航发生后布局不会按预期更新。

如果有人遇到类似的问题或对如何解决此问题有任何见解，我将非常感谢您的帮助。谢谢你！