标签: nuxtjs3

Store (Pinia) 与 UseState

如果我没记错的话，useState可以更换任何商店吗Pinia？鉴于这useState使得 ref 可在所有组件之间共享，我很难知道是否应该使用 store 或 useState ref。例如，假设我有一个currentUser (firstName, lastName, email)在页面加载时从远程 API 获取的数据。我应该将此信息存储在PiniauserStore 中还是存储在useState('currentUser')?

该主题的最佳实践是什么？

useState() 文档： https: //v3.nuxtjs.org/api/composables/use-state

Pinia 文档： https: //pinia.vuejs.org/core-concepts/

我已经安装了这些依赖项 Package.json：

    {

      "devDependencies": {
        "@intlify/nuxt3": "^0.1.6",
        "@nuxtjs/eslint-config": "^7.0.0",
        "@nuxtjs/eslint-module": "^3.0.2",
        "eslint": "^8.1.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-nuxt": "^3.0.0",
        "eslint-plugin-vue": "^7.20.0",
        "nuxt3": "latest",
        "prettier": "2.4.1",
        "sass": "^1.43.3",
        "vite-plugin-eslint": "^1.3.0"
      }
    }

在 .eslintrc.js

  extends: [
    'eslint:recommended',
    'plugin:nuxt/recommended',
    'prettier'
  ],

在 nuxt.config.ts

import eslintPlugin from 'vite-plugin-eslint';
export default defineNuxtConfig({
...
    vite: {
        plugins: [eslintPlugin()]
    },
    buildModules: ['@intlify/nuxt3', '@nuxtjs/eslint-module',],
})

这些选项都不适用于 nuxt 3。

我正在遵循一个指南，其中api routes构建如下：

1 创建server/api/route.js文件：

export default defineEventHandler((event) => {

    return {
        message: `hello api route`
    }
})

2 在组件中使用 api 路由，如下所示：

<script setup>
const { data: message } = await useFetch('/api/route')
</script>

<template>
  <div>
    <p>api data {{ message }}</p>
  </div>
</template>

这有效，但是当我尝试添加query parameterin时1.：

export default defineEventHandler((event) => {

    const { name } = useQuery(event)

    return {
        message: `hello api name parameter ${name}`
    }
})

并在组件中调用它2.：

<script setup>
const { data: …

我需要为 Nuxt3 配置服务器端口。我尝试这样做：

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig(
  vite: {
    server: {
      port: 5000,
    },
  },
})

但这不起作用。如何在Nuxt3中设置服务器端口？

看起来很基本，但我在任何地方都找不到与 Nuxt3 auto-import一起使用的 eslint 设置，以避免no-undef错误。我没有使用打字稿。

我尝试了以下软件包：@antfu/eslint-config、plugin:nuxt/recommended、@nuxt/eslint-config、@nuxtjs/eslint-config、@nuxt/eslint-config-typescript，到目前为止没有运气。

现在唯一有效的是在 .eslintrc 中设置每个引用globals...

Nuxt 3 第一个候选版本即将推出，所以我正在使用 Nuxt 3 开始一个全新的项目。我已经面临一个常见的问题，我正想问如何解决它。但我自己做到了，所以我提出了一个自我回答的问题，以帮助将来可能面临同样问题的人。

如何在我的 vue 组件中使用全局 Sass（或 Scss）变量？我在其他帖子中看到我们可以使用该@nuxtjs/style-resources包，但它看起来像是 Nuxt 2 包。我认为在 Nuxt 3 中可能有更好的方法来做到这一点，而无需添加style-resources像?这样的依赖项。

我所说的“全局变量”是 SASS 变量，是指我希望能够在任何 Vue 组件中使用 SASS 变量，而不必包含 SASS 文件。

我想要的是

（鉴于我已经安装了该sass软件包）

// @/assets/style/main.sass
$grey-bg: #CCC
$light-blue: #c6d8f5

<!-- app.vue -->
<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

<style lang="sass">
body
  background-color: $grey-bg
  color: $light-blue
</style>

我已经尝试过的

我尝试将我的 sass 文件包含在Nuxt 配置 CSS属性中，如下所示：

// nuxt.config.ts
import { defineNuxtConfig } from "nuxt3"

export default defineNuxtConfig({
    css: ["@/assets/style/global.sass"]
}) …

我是 Nuxt 和 Vue 的新手，所以不要介意。我正在尝试使用vue3-video-player在我的 Nuxt 3 应用程序中创建一个视频播放器组件，但它似乎不支持 SSR，因为当我将其导入到视频组件中时出现以下错误：

ReferenceError: navigator is not defined

即使组件用<ClientOnly>. 因此，根据我在Nuxt 3 文档plugins/vue3-video-player.client.js中看到的内容，我想我应该创建一个仅包含以下内容的客户端插件：

import Vue3VideoPlayer from '@cloudgeek/vue3-video-player'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Vue3VideoPlayer)
})

但是当我尝试在我的组件中使用它时<vue3-video-player>，出现以下错误：

[Vue warn]: Failed to resolve component: vue3-video-player

所以我想我的问题是如何使用 Nuxt 3 插件创建仅客户端的 Vue 组件？或者是否有一种完全不同的方法效果更好？

在 Nuxt 2 中，我可以通过利用 Stencil 包中提供的 renderToString() 方法并结合 Nuxt 钩子来使用服务器端渲染的 Stencil 组件，如下所示：

import { renderToString } from '[my-components]/dist-hydrate'

export default function () {
  this.nuxt.hook('generate:page', async (page) => {
    const render = await renderToString(page.html, {
      prettyHtml: false
    })
    page.html = render.html
  })
}

自从Stencil 2.16.0最近发布以来，我能够在由 Vite 提供支持的 Nuxt 3 中使用本机 Web 组件。然而我还没有找到一种方法来连接模板水合过程。不幸的是，还没有关于可组合useHydration()的文档。

有谁知道我如何让它在 Nuxt 3 中工作？

我尝试让它发挥作用

<component v-if="!pending" :is="dynComponent" />

在 Nuxt 2 中这没有问题，但在 Nuxt 3（Vue 3？）中似乎并不那么容易。

该变量dynComponent填充有进程过程中组件的名称 (myComponent)。

与 Nuxt 2 一样，我使用import myComponent from "@/layouts/myComponent.vue". 错误可能就在那里。

resolveComponent我在文档中读到需要使用助手。我也按照描述尝试过...但没有成功。(动态组件）

我也没有收到任何错误消息。什么都没发生。
有人可以解释一下如何在 Nuxt 3 中使用动态组件吗？

在 Nuxt2 中，您可以使用模板 $refs访问<script>它们this.$refs

我想知道 Nuxt3 的等效项是什么。

我需要它来访问元素的内部文本。我不被允许使用querySelector或getElementById等等。

这就是我们编写代码的方式。我可以提供 html 元素ref="fooBar"，但我无法使用this.$refs.fooBar或 访问它this.$refs。

<script setup lang="ts">
import { ref, computed } from 'vue';

const foo = ref('bar');

function fooBar() {
  //Do stuff
}
</script>

<template>
  //Html here
</template>