标签: 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 文件

我仍然对我在这里做错了什么感到有点困惑。本质上我有一个 vue 组件，我想在安装元素后异步加载一些数据。

我正在使用 NUXT 3 和组合 API。

<script setup>

let directories = useState('directories', () => null);

onMounted( async () => {
const { data: response } = await useAsyncData('directories', () => $fetch('/api/s3-get-directories'));
directories.value = response;
});

</script>

看起来 onMounted 在渲染之前触发，并且没有正确接收数据。如果我将 Mounted 包装到 setTimeout 中并给予 100 毫秒的延迟，它就可以正常工作。

我希望有一个示例来说明如何在客户端准备好后加载数据而不会阻塞。或者对我在这里做错了什么有任何解释。

您好，我正在 Nuxt 上创建网站，并且我已经在 Nuxt 3 上创建了一个新应用程序。但是我在部署方面遇到了问题，“正常服务器”没有像 Nuxt 2.x 那样的“正常”构建。

我正在使用“Lamdba”预设。 https://v3.nuxtjs.org/docs/deployment/presets/lambda

// nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  // Global page headers: https://go.nuxtjs.dev/config-head

  nitro: {
    preset: 'lambda'
  },

  head: {
    title: 'Title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
 
      
    ],
    link: [
      { rel: 'icon', type: 'image/png', href: '/favicon.png' }
    ],
  script: [
    {  
      type: 'text/javascript', 
      src: '/mana.js',
  }
]
},
})

在 Nuxt 2.x 上我使用了这个：

// nuxt.config.js …

[Vue warn]：当没有要关联的活动组件实例时，会调用 onServerPrefetch。生命周期注入 API 只能在 setup() 执行期间使用。如果您使用异步 setup()，请确保在第一个等待语句之前注册生命周期挂钩。

可组合的

const isLoggerdIn = () => {
    return expire.value //return true or false
  }

中间件

export default defineNuxtRouteMiddleware( (to) => {
  const { isLoggerdIn } = useAuth() // composable

  if (isLoggerdIn() && to.name == 'login'){
    return navigateTo("/home")
  }

  if (!isLoggerdIn() && to.name !== 'login'){
    return navigateTo("/login")
  }

})

在主页和登录页面上

definePageMeta({
  middleware: 'auth'
})

我刚刚开始学习 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> …

MRE： https: //github.com/Morpheu5/nuxt3-Hydration-mre（原为https://box.morpheu5.net/s/H6WXBfCebrRyTa8）

根据文档，useStateNuxtJS 3 应该是 SSR 友好的轻量级创建状态的方式。我需要使用它，以便任何人都page/[somepage].vue可以设置一些数据供layout/default.vue. 这是一个页面：

<template>
    <div>Some page content.</div>
</template>

<script setup>
    useState('page_title', () => 'Some page title');
</script>

这是默认布局：

<template>
    <div>
        <h1>{{ page_title }}</h1>
        <slot />
    </div>
</template>

<script setup>
    const page_title = useState('page_title');
</script>

当我在开发模式下运行它时，我在浏览器的控制台中收到此警告：

runtime-core.esm-bundler.js:38 [Vue warn]: Hydration text content mismatch in <h1>:
- Client: 
- Server: Some page title 
  at <Default > 
  at <AsyncComponentWrapper > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at …

我\xe2\x80\x99m 使用 Nuxt 3 构建应用程序，我想添加页面加载器直到网站加载。

只是尝试按照配置nuxt/auth 文档向我的 NuxtJs 3 应用程序添加身份验证，但在应用程序启动期间仍然出现错误：

// nuxt.config.js

export default defineNuxtConfig({
    auth: {
        // ...
    },
    modules: [
        // '@nuxtjs/axios',
        '@nuxtjs/auth-next'
    ],
})

收到相同的错误，@nuxtjs/axios但我只是将其注释掉，因为其官方文档指示切换到$fetch API.

无法找出错误在哪里

我尝试启动 nuxt3 程序，现在我想设置服务器代理。对 http://localhost:3000/api/v1 的请求应该会从http://39.98.58.238:8594上的后端服务器返回响应，但现在它给了我一个 404 页面。

首先，我按照 vite.js 文档设置 nuxt.config.js 文件

nuxt.config.js

export default defineNuxtConfig({  
  ...  
  vite: {
    server: {
      proxy: {
        '/api': {
          target: 'http://39.98.58.238:8594',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      },
    }
  },
})

页

<script setup>
  async function test() {
   await usefetch('/api/v1/xxx')
  }
</script>
<template>
  <div>
    <button @click="test">check</button>
  </div>
</template>

它不起作用，我的请求返回了 404 页面。然后我尝试遵循这个问题：text，不要使用vite代理

nuxt.config.js

export default defineNuxtConfig({
  nitro: {
    devProxy: {
        '/api/': {
            target: 'http://39.98.58.238:8594/',
            changeOrigin: true
        }
    }
  } …

我在一个项目中使用 nuxt 3，但找不到使用 Laravel 和 Sanctum 进行身份验证的简单方法。

@nuxtjs/axios 模块仅兼容 nuxt 2，开发人员为 nuxt 3 提供的软件包（@nuxtjs-alt/auth）没有提供太多文档。我尝试实现它，但 nuxtApp().$auth 总是返回 undefined。

如何在登录屏幕中对我的用户进行身份验证，然后使用身份验证中间件来保护我的路由？我重申一下NUXT3的使用