标签: nuxtjs3

我是 Vue3 和 Nuxt3 的新手，我正在从头开始一个新项目，尝试使用 Typescript 正确设置它。

这就是我的package.json样子

{
    "name": "nuxt-prototype",
    "private": true,
    "scripts": {
        "build": "nuxt build",
        "dev": "nuxt dev",
    },
    "devDependencies": {
        "@privatePackage/commitlint-config": "^1.0.1",
        "@privatePackage/prettier-config": "^2.0.0",
        "@cspell/dict-de-de": "^3.1.0",
        "@nuxt/devtools": "latest",
        "@nuxtjs/color-mode": "^3.3.0",
        "@nuxtjs/eslint-config-typescript": "^12.0.0",
        "@nuxtjs/eslint-module": "^4.1.0",
        "@nuxtjs/stylelint-module": "^5.1.0",
        "@types/node": "^20.4.8",
        "@typescript-eslint/eslint-plugin": "^6.2.1",
        "@typescript-eslint/parser": "^6.2.1",
        "@vueuse/core": "^10.3.0",
        "@vueuse/nuxt": "^10.3.0",
        "autoprefixer": "^10.4.14",
        "cspell": "^6.31.2",
        "eslint": "^8.46.0",
        "eslint-config-prettier": "9.0.0",
        "eslint-plugin-prettier": "^5.0.0",
        "eslint-plugin-simple-import-sort": "^10.0.0",
        "eslint-plugin-vue": "^9.16.1",
        "lint-staged": "^13.2.3",
        "nuxt": "^3.6.5",
        "postcss": "^8.4.27",
        "postcss-html": "^1.5.0",
        "prettier": "3.0.1",
        "prettier-plugin-tailwindcss": "^0.4.1",
        "stylelint": "^15.10.2", …

我正在尝试在 Nuxt 3 项目中添加自定义布局，但该布局不起作用，并且控制台显示以下消息：

选择的布局 test_layout 无效

没有其他错误。

这是我尝试过的代码：

-| layouts/
 ---| test_layout.vue
-| pages/
 ---| blog/index.vue

-| layouts/
 ---| test_layout.vue
-| pages/
 ---| blog/index.vue

<template>
  <div>
    My Test Layout Header
    <slot />
  </div>
</template>
<script>
export default {
  name: "test_layout"
}
</script>

我已经尝试<Nuxt/>代替<slot />，但它不起作用。

我正在努力将 sweet Alert 2 作为插件集成到 nuxt3 应用程序中。我正在尝试使用vue-sweetalert2但我在某些时候它定义了全局变量。

// Inside the install function
vue.prototype.$swal = swalFunction;
vue['swal'] = swalFunction;

你能帮我，如何访问这些全局变量吗？文档没有表明这一点。

我想目标是在我的插件中添加如下内容：

import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';

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

  return {
    provide: {
      swal: swalFunction // <- how to access this ?
    }
  }
})

我正在构建一个 Nuxt 3 SSR 应用程序，我对此非常熟悉。如果可能的话，我无法理解的是为多个域创建一个 Nuxt 项目。例如，我有一些网站，例如 websitea.com、websiteb.com、websitec.com，并且希望将页面分开，同时共享组件、可堆肥等。我不确定这是否可行，但它会如果有人有任何建议，我们将不胜感激。

当用户按下箭头键时，我试图调用 swiper 附带的 .slideNext() 和 .slidePrev 。

我已经成功地使用 querySelector 做到了这一点，如下所示：

const changeSlide = (event: KeyboardEvent) => {

    const slides = document.querySelector('.swiper').swiper

    if(event.key === 'ArrowLeft') {
      slides.slidePrev();
    } else if (event.key === 'ArrowRight') {
      slides.slideNext();
    }

}

然而，此方法会产生警告，并且该项目通常不允许使用 querySelector。因此，我不想使用 ref 来选择滑动器，但我还没有成功。

这是我尝试过的：

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { Navigation } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/navigation';
// just some imports that are needed

const swiperRef = ref(); …

在我最近开始的项目中，我想使用vue.draggable.next。所以我在 nuxt 插件目录中创建了一个“.js”文件，并添加了如下代码。

import VueDraggableNext from "vue-draggable-next";

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

然后我在我的一个组件中使用了它，如下所示，

<template>
  <div class="h-full w-full border-2 border-dashed rounded-lg p-5 flex">
    <div class="flex w-1/6 h-full">
      <ComponentPalette />
    </div>
    <VueDraggableNext
      v-model="form.children"
      group="people"
      @start="isDragOver = true"
      @end="isDragOver = false"
      item-key="id"
      class="flex flex-col w-5/6 h-full border-blue-700 border-2 border-dashed rounded-lg p-5 space-y-5"
    >
    <template #item="{element}">
    <FormBuilder
        :component="element"
        @update="update"
      />
   </template>
      
    </VueDraggableNext>
  </div>
</template>

<script setup>
import FormBuilder from "~~/components/dynamic-components/FormBuilder.vue";
import ComponentPalette from "~~/components/form-builder/ComponentPalette.vue";
import { v4 as uuidv4 } …

首先我的配置：

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'\n\nexport default defineNuxtConfig({\n    // if you want to use static HTML generation (SSG)\n    target: 'static',\n\n    // if you want to use server-side rendering (SSR)\n    ssr: true,\n\n    css: [\n        'assets/scss/main.css',\n        'assets/scss/header.css',\n        '@fortawesome/fontawesome-svg-core/styles.css'\n    ],\n\n    build: {\n        transpile: [\n            '@fortawesome/vue-fontawesome',\n            '@fortawesome/fontawesome-svg-core',\n            '@fortawesome/pro-solid-svg-icons',\n            '@fortawesome/pro-regular-svg-icons',\n            '@fortawesome/free-brands-svg-icons'\n        ]\n    }\n\n})\n

/plugins/fontawesome.js

import { defineNuxtPlugin } from '#app';\n\n/** Fontawesome for Nuxt 3\n * https://fontawesome.com/docs/web/use-with/vue/use-with#nuxt \n * \n*/\n\n// import the fontawesome core\nimport { library, config } from '@fortawesome/fontawesome-svg-core'\n\n// …

我在一个项目中使用 Nuxt3，当使用文档中的 cli 安装它时，它生成了一个 vue 2.7 项目。

我怎样才能使用 vue 3？

我一直在尝试将需要 Node.js 实例的 Nuxt 3 应用程序部署到 Heroku。

我已将 Procfile 添加到项目的根目录中，但文档（我认为引用的是 Nuxt 2）说要添加脚本命令“yarn start”以在服务器上启动并运行 node.js 实例。

但是，Nuxt 3 没有启动命令。

我应该向 Nuxt 3 应用程序的 Procfile 添加什么命令？或者这已经不再必要了？

：我的 Nuxt3 应用程序遇到以下问题。当通过构建过程设置图像源时，template strings将不会渲染图像。否则，当我正常设置图像 src 时，它会出现。但我动态地需要它。有些预告片需要渲染不同的图像。

一切都工作正常，例如道具......

工作代码：

...
<img
  src="/assets/_DSC0238_E.jpg"
  :alt="props.name"
  class="w-full aspect-square object-cover"
  :class="`aspect-${props.aspectRatio}`"
/>
...

不工作的代码：

...
<img
  :src="`props.image`"
  :alt="props.name"
  class="w-full aspect-square object-cover"
  :class="`aspect-${props.aspectRatio}`"
/>
...

有什么方法可以解决这个问题呢？