标签: nuxtjs3

当我使用 Nuxt3 项目时，我遇到了滚动行为问题nuxt-link。

问题是，如果我使用当前页面访问任何页面<nuxt-link>，该页面滚动位置与我在上一页中的位置类似。

但我希望当我更改页面时，页面滚动位置会重置到顶部。

我在/sf/answers/4817357191/上关注了 @kissu 的一些答案，但它们似乎都不起作用。

目前我有

/plugins/route.scrollbehaviour.js

import { defineNuxtPlugin } from '#app'
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.$router.options.scrollBehavior = (to, from, savedPosition) => {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  }
})

我的 Package.json （对于任何冲突）

{
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^5.3.0",
    "nuxt": "3.0.0-rc.6",
    "nuxt-lodash": "^2.2.0",
    "nuxt-schema-org": "^0.6.2",
    "unplugin-vue-components": "^0.21.1"
  },
  "dependencies": {
    "@ant-design/icons-vue": "^6.1.0",
    "@mdi/js": "^6.7.96",
    "@nuxtjs/device": "Redemption198/device-module",
    "@pinia/nuxt": "^0.3.0",
    "@tailwindcss/typography": "^0.5.2",
    "ant-design-vue": …

我有一个products/index页面，products/[slug]在主产品页面中，我有一个NuxtLink更改页面并转到products/[slug]并获取该产品的数据。

第一次单击时，我有正确的数据，但是当我单击后退或单击产品/索引页面然后尝试单击另一个产品时，我有我单击的第一个产品的信息，并且在每个产品上，我再次有我点击的第一个产品的信息。

使用console.log引导我发现我的获取数据没有改变，我在这里错过了什么吗？

使用:keyand :page-keyon<nuxtPage/>不起作用。

我点击的第一个产品

第二个产品仍然没有变化，数据来自第一个产品

第三张图还是没有变化

productComponent.vue

<template>\n  <div class="mx-auto rounded border mb-7 border-blue-200 pt-1 px-2 mx-1 mb-2">\n    <NuxtLink :to="link">\n      <img\n        class="rounded mx-auto mb-3 border-b border-y-blue-300 pb-3"\n        :src="img"\n        :alt="alt"\n      />\n      <div class="mt-2">\n        <div>\n          <div class="items-center font-bold text-slate-700 leading-snug">\n            <p class="pr-3">{{ title }}</p>\n          </div>\n          <div class="mt-2 text-lg text-slate-600 pr-3 pb-2">\n            \xd9\x82\xdb\x8c\xd9\x85\xd8\xaa …

我正在尝试在 Nuxt 3.0.0-rc.8 应用程序中加载 mapboxgl 样式表。通常，对于 Vue 项目，我手动将其添加到 index.html 页面的头部。

然而，这显然不是 Nuxt 3 中的做法。我尝试将其添加到 nuxt.config.ts 文件中的 head 和 css 选项中，但都没有成功。我确实注意到，当我将它添加到 css 数组时，它被添加到我的标题中，但“https://”被替换为“_nuxt”。

我知道我错过了一些简单的事情。这是我的配置文件：

export default defineNuxtConfig({
  css: [
    '~/assets/css/main.css',
  ],
  build: {
    postcss: {
      postcssOptions: require('./postcss.config.js'),
    },
  },
  buildModules: ['@pinia/nuxt'],
  runtimeConfig: {
    treesAPIKey: '',
    public: {
      baseURL: '',
      mapToken: '',
    },
  },
  head: { link: [{ rel: 'stylesheet', href: 'https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' }] },
});

我已经成功地将vue-i18n库很好地集成到我的开发环境中，并且它运行得很好。

但是，当我在 Heroku 上部署项目时，使用 vue-i18n复数或链接区域设置消息的每条消息都不会被解释，并显示整个区域设置消息字符串：

我已经就回购协议展开了讨论，但到目前为止还没有回复......

我在Nuxt3插件中使用 vue-i18n (9.2.2)，因此使用VueJS 3 ，并使用Vite和 vue-i18n vite-plugin-vue-i18n插件进行构建。

Nuxt3配置（nuxt.config.ts），显示Vite插件配置来解析语言环境JSON文件：

import { defineNuxtConfig } from 'nuxt'
import { resolve, dirname } from 'node:path'
import { fileURLToPath } from 'url'
import VueI18nVitePlugin from '@intlify/unplugin-vue-i18n/vite'

export default defineNuxtConfig({
  ...
  vite: {
    plugins: [
      VueI18nVitePlugin({
        include: [
          resolve(dirname(fileURLToPath(import.meta.url)), './locales/*.json')
        ]
      })
    ]
  },
 ...
});

vue-i18n 的 Nuxt 插件 (plugins/vue-i18n.ts) ：

import { createI18n } from 'vue-i18n' …

我尝试做一件简单的事情：在路线更改时，重新获取数据。

这是我的链接：

<li v-for="category in categories" :key="category.id" class="mb-1">
  <NuxtLink :to="{ query: { cat: category.slug } }">
    {{category.title}}
  </NuxtLink>
</li>

还有我的要求：

<script setup>
const route = useRoute()

const { data:categories } = await useFetch('http://127.0.0.1:8000/api/tasks/category/', {
  key: route.fullPath, 
  initialCache: false
})
const { data:tasks, refresh } = await useFetch(`http://127.0.0.1:8000/api/tasks/?cat=${route.query.cat}`, {
  key: `tasks:${route.query.cat}`, 
  initialCache: false
})

watch(() => route.query.cat, () => refresh())

</script>

因此，点击时，url 会发生很大的变化：

http://localhost:3000/tasks?cat=category1
http://localhost:3000/tasks?cat=category3
http://localhost:3000/tasks?cat=category2

但请求是相同的（来自 Django DRF 后端）：

GET http://127.0.0.1:8000/api/tasks/?cat=category1
GET http://127.0.0.1:8000/api/tasks/?cat=category1
GET http://127.0.0.1:8000/api/tasks/?cat=category1

看起来它保留了第一类，即使initialCache: false

我正在尝试将 auth0 添加到我的 nuxt3 应用程序中，但我在如何处理它时遇到了困难。auth-nuxt 模块仍然不适用于 nuxt3，并且 auth0-spa-js 无法使其与 SSR 一起使用，我遵循了本教程。

import createAuth0Client from "@auth0/auth0-spa-js";

let auth = await createAuth0Client({
  domain: "dev-......com",
  client_id: "Z0...................0T6I",
  redirect_uri: '<MY_CALLBACK_URL>'
});

export default auth;

import auth from "../store/authfile";
export default defineNuxtRouteMiddleware(async (to, from) => {
    let isAuthenticated = await auth.isAuthenticated();
    if (to.path === "/" && !to?.query?.code) {
        return;
    }
    if (!isAuthenticated) {
        const query = to?.query;
        if (query && query.code && query.state) {
            await auth.handleRedirectCallback();
        } else {
            await auth.loginWithRedirect();
        }
    } …

设想：

1. 有登录页面。
2. 我们只想在按下登录按钮时向服务器发送请求。
3. 我们不想在用户更改输入时发送请求。

这是我的代码：

const body = ref<{ identifier: string, password: string }>({
  identifier: '',
  password: ''
});

const {data, execute, error, pending} = await useFetch(`${config.public.baseUrl}/api/auth/local`, {
  body,
  lazy: true,
  method: 'post',
  immediate: false,
  watch: [],
})

async function login() {
  console.log("login");
  await execute();
}

和模板

    <form @submit.prevent="login">
      <label for="email">
        Email
        <input type="text" v-model="body.identifier">
      </label>
      <label for="password">
        Password
        <input type="password" v-model="body.password">
      </label>

      <button>Login</button>
    </form>

不幸的是，即使我不单击按钮，每次用户在此表单中键入字母时，该表单都会发送post请求。/api/auth/local

文档中描述了此行为：

https://nuxt.com/docs/api/composables/use-fetch

所有获取选项都可以指定一个计算值或参考值。这些将受到监视，并在更新时使用任何新值自动发出新请求。

我需要覆盖这个功能。

的变化

v-model

到

v-model.lazy

有一点帮助，但我仍然无法控制发送此请求的确切时间。

我目前的解决方法

const …

我正在使用 Nuxt 3 和 Vue 3。我有一个默认布局的目录结构，我想将其应用于包括该error.vue页面在内的所有页面。

注意：该error.vue文件位于项目的根目录中。

我的目录结构如下：

project-application
  - /assets/
      - /styles/
          - errorStyles.scss
  - /components/
  - /composables/
  - /layouts/
      - default.vue
  - /pages/
      - index.vue
      - /course/
          - [id].vue
  - /public/
  - /server/
  - /utils/
  - /app.vue
  - /error.vue
  - /nuxt.config.ts
  - package.json
  - ...

目前，这些内容default.vue已应用于我的pages文件夹中的所有内容。

问题：如何将我的default.vue布局应用到我的布局 error.vue（位于项目根文件夹中）。

app.vue文件

project-application
  - /assets/
      - /styles/
          - errorStyles.scss
  - /components/
  - /composables/
  - /layouts/
      - default.vue
  - /pages/ …

情况

npx nuxi init my-project-name
cd my-project-name
npm install

当我运行此命令时，收到错误“defineNuxtConfig 未定义”。

我尝试过重新安装node.js，但没有成功。
导致此错误的原因可能是什么？

版本
节点：18.15.0
nuxt：3.3.2
npm：9.5.0

重新安装node.js 重新安装npm、npx、typescript、nuxt全局包

我将 Nuxt 3 与 Laravel API 后端一起使用，并尝试找出哪个可组合项useAsyncData或useFetch，或者只是$fetch我应该用于 CRUD 和身份验证中的不同 API 请求。

文档说：

useFetch 是在组件设置函数中处理数据获取的最直接的方法。另一方面，当想要基于用户交互发出网络请求时，$fetch 几乎总是正确的处理程序。

但是，在组件中使用 $fetch 而不用 useAsyncData 包装它会导致两次获取数据：首先在服务器上，然后在水合作用期间再次在客户端上，因为 $fetch 不会将状态从服务器传输到客户端。因此，由于客户端必须再次获取数据，因此双方都会执行 fetch。我们建议在获取组件数据时使用 useFetch 或 useAsyncData + $fetch 来防止重复获取数据。

您可以将 $fetch 用于仅在客户端执行的任何方法。

POST我在文档中看到的唯一请求示例使用$fetch. 几乎所有其他示例都是GET使用 的请求useFetch。

这是否意味着useFetch通常应该用于GET请求和$fetchforPOST和PUT请求？

我很困惑，因为我看过很多关于POST使用 requestsuseFetch和GETrequests that use的教程$fetch。

它是否更容易用于useFetch所有请求，因为它有很多$fetch没有的参数、选项和返回值，并且还因为它避免了在组件中两次获取数据的风险？

无论如何， 和 的错误处理useFetch …