标签: nuxtjs3

我想style-resources在新的 Nuxt 3 项目中全局配置和使用一些变量，但是当我将一些选项传递给 nuxt.config 文件时，我收到此错误：

Cannot start nuxt: resolver.resolveModule is not a function

我的依赖项：

  "devDependencies": {
    "nuxt3": "latest",
    "prettier": "^2.4.1"
  },
  "dependencies": {
    "@nuxtjs/style-resources": "^1.2.1",
    "sass": "^1.43.4"
  }

nuxt.config.js

export default defineNuxtConfig({
  css: ['~/assets/main.scss'],
  buildModules: ['@nuxtjs/style-resources'],
  styleResources: {
    scss: ['./assets/variables.scss'],
  },
});

我正在使用这个库： https ://github.com/nuxt-community/style-resources-module

我知道 Nuxt 3 仍处于 Beta 版本，但也许有人已经遇到了这个问题或者知道应用全局资源的不同方式

我正在尝试<NuxtLink>在 Nuxt 3 中使用重定向。

但是，URL 更改后我的页面将不会显示。这意味着，单击链接后，URL 会更改为 to="" 中指定的内容，但除非刷新页面，否则内容不会显示。想知道我做错了什么。

这是我的路由代码

 <template>
      <div class="top-nav-tab">
        <NuxtLink to="/foundations"><h3>Foundations</h3></NuxtLink>
     </div>
   </template>

这是我的页面代码

<template>
  <h2>Foundation page</h2>
</template>

我的网站使用 nuxt3 和 vue3。但我在使用 onMounted 挂钩时遇到问题。

这是我的 vue 页面。

<script setup lang="ts">
  import { onMounted } from '@vue/runtime-core';

  onMounted(() => {
    console.log('myheader mounted');
  })
</script>

<template>
    <h1>test</h1>
</template>

我收到此错误：

[Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

让我很困惑……TT

我使用 来useFetch获取组合 api 中的数据，然后调用组件中 hook 中的函数onMounted，这是代码。

useShows.ts（可组合）

export function useShows(){

    var shows = useState<Show[]>('shows')

    const fetchShows = async() => {
        const {data, pending} = await useFetch<Show[]>('http://localhost:3000/shows')
        shows.value = data.value
    }

    return {shows, fetchShows}
}

显示.vue

<script setup lang="ts">

    var { shows, fetchShows } = useShows()

    onMounted(() => {
        console.log("On mounted called")
        fetchShows()
    })
</script>

<template>
    <div>{{shows}}</div>
</template>

当我/shows从主页导航到它时，它工作正常，但是当我直接打开链接时，localhost/shows它不起作用，只给我空值。

当我尝试使用 vue-fontawesome 框架以及 @nuxtjs/fontawesome 框架时，我遇到 Nuxtjs 错误，这是错误：

[nuxt] [request error] Cannot read properties of undefined (reading 'component')
    at $id_c50a96b3 (./.nuxt/dist/server/server.mjs:3239:31)
    at async __instantiateModule__ (./.nuxt/dist/server/server.mjs:19193:3)

这是我的代码nuxt.config.ts：

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/fontawesome'
  ],

  fontawesome: {
    icons: {
      solid: ['faXmark']
    }
  }
})

这是我想使用图标的组件：

[nuxt] [request error] Cannot read properties of undefined (reading 'component')
    at $id_c50a96b3 (./.nuxt/dist/server/server.mjs:3239:31)
    at async __instantiateModule__ (./.nuxt/dist/server/server.mjs:19193:3)

顺便说一句，错误只是在我尝试加载页面时出现，而不是在运行时出现。

我不知道如何将参数传递给 Nuxt 3 中的匿名函数。

index.vue:

<template>
  <form @submit.prevent="signUpNewsletter()">
    <input type="email" placeholder="example@x.com" v-model="userEmail">
    <input type="submit" value="Submit">
  </form>
</template>

<script setup>
const userEmail = ref('x@x.de')

function signUpNewsletter () {
  useAsyncData(
    'newsletter',
    () => $fetch('/api/sign_up_news', {
      method: 'POST', // Post method works
      body: {
        email: userEmail.value
      }
    })
  )
}
</script>

server/api/sign_up_news.js:

import { createClient } from '@supabase/supabase-js'

export default async (email) => { // can't read the parameter
  const SUPABASE_KEY = 'key123'
  const SUPABASE_URL = 'url.supabase.co'
  const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)

  const …

我正在尝试从 Vue 3 迁移到Nuxt 3。我已经使用 vitest 为我的组件编写了单元测试，这些测试在我的Vue应用程序中运行良好，但是 Nuxt 应用程序中的相同测试给出了以下错误：

import { describe, it, expect } from "vitest";

import { mount } from "@vue/test-utils";
import AtomsButton from "./AtomsButton.vue";

describe("AtomsButton", () => {
  it("button renders properly", () => {
    const wrapper = mount(AtomsButton, { slots: { default: "Button" } });
    expect(wrapper.html()).toContain("Button");
  });
});

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": …