标签: nuxtjs3

在 Nuxt2 中有连接检查器

https://nuxtjs.org/docs/concepts/context-helpers/#connection-checker

你可以执行以下操作this.$nuxt.isOffline

有没有办法用 Nuxt3 做到这一点？

我尝试查看useNuxt()其中是否有一些信息，但没有看到任何内容。

我的问题也在 Github 讨论中提出：https://github.com/nuxt/framework/discussions/4996

我尝试将简单的 Nuxt 3 应用程序部署到 AWS Lambda 以实现 SSR。到目前为止我有：

在 硝基.config.ts 中

import { defineNitroConfig } from 'nitropack';

export default defineNitroConfig({
  preset: 'aws-lambda',
  serveStatic: true
});

在 Lambda 处理程序中

import { handler } from './output/server/index.mjs';

export const runner = (event, context) => {
  const { statusCode, headers, body } = handler({ rawPath: '/' });

  return {
    statusCode,
    body,
    headers
  }
}

在无服务器.yaml 中

functions:
  ssr:
    handler: handler.runner
    timeout: 15
    package:
      individually: true
      include:
        - output/**
    events:
      - httpApi:
          path: '*'
          method: …

我目前使用 Angular + Nodejs 作为我的主要技术堆栈...
我对 Vue 感兴趣，用它做了一些简单的项目，并观看了一些关于 Nuxt3 的视频。Nuxt3是否支持SPA应用程序（使用nodejs API）？
如果没有的话，以后会支持SPA吗？

我最近开始学习 NuxtJs 并使用 nuxt3 模板创建一个 nuxt 应用程序。我用来生成入门项目的代码是

npx nuxi 初始化 nuxt-app

但是，终端显示应用程序已创建，并且开发服务器也开始显示 Nuxt3 欢迎页面。但是，当我在 VS Code 中加载目录时，页面、存储和组件等文件夹不可见，如下面的屏幕截图所示。

nuxt start + nuxt Preview 有区别吗？

在生产模式下使用 ssr nuxt 应用程序启动服务器是否正确： npm run build (nuxt build)
npm run start (nuxt start) ？
对我来说，这些文档有点令人困惑，https://v3.nuxtjs.org/api/commands/preview/ “预览命令在运行构建命令后启动服务器来预览您的 Nuxt 应用程序。”

使用 Nuxt 3 和vue-gtag$gtag ，从组件访问的正确方法是什么？

插件/gtag.client.js：

import VueGtag from 'vue-gtag';

export default defineNuxtPlugin(nuxtApp => {
  const router = useRouter();
  nuxtApp.vueApp.use(
    VueGtag,
    {
      config: {
        id: '...'
      }
    },
    router
  );
});

在 Nuxt 2 中，this.$gtag可以从组件文件访问。

在Nuxt 3中，我似乎找不到它：

const nuxtApp = useNuxtApp();
nuxtApp.$gtag //undefined

查看源代码，似乎定义正确，所以我不认为这是插件本身的问题。 app.config.globalProperties.$gtag = api;

我需要有人帮助我解释如何在 Nuxt 3 应用程序中安装 Vuex。

当我使用此命令安装 Nuxt 3 时npx nuxi init，我有一个新的 Nuxt 3 应用程序，但是当我想在 Nuxt 中使用 Vuex 时，我不能，因为默认情况下它没有安装在新的 Nuxt 3 应用程序中。
所以我想我需要使用“npm i vuex”安装它，好吧，我知道这很容易，但对我来说却不是。
我需要有人准确地向我解释如何让它发挥作用。

互联网上没有关于如何在新的 Nuxt 3 应用程序中设置 Vuex 的文档。
如果有人可以向我发送一个由 Nuxt 3 应用程序安装的简单项目npx nuxi init或在此处提供代码，我将了解其原因等...

使用 NuxtJs 时如何检查响应状态代码useFetch？

目前我正在按如下方式处理响应，但我无法在任何地方找到如何获取确切的响应状态代码，只有错误消息，例如FetchError: 403 Forbidden。

useFetch(url, options).then(
    (res) => {
        const data = res.data.value;
        const error = res.error.value;

        if (error) {
            console.error(error);
            // handle error
        } else {
            console.log(data);
            // handle success
        }
    },
    (error) => {
        console.error(error);
    }
);

我有一个问题。我实际上正在尝试BASE_URL通过 nuxt 从 Pinia 商店中的 env进行访问runtimeConfig，它给出了错误500 nuxt 实例不可用

这是错误图像

我想指出的一件事是，当我硬编码时BASE_URL它工作正常，但是当我尝试从环境变量访问时BASE_URL它会出现错误。

这是我的代码

皮尼亚店

// Pinia Store for Home Page
import { useRuntimeConfig } from '#app'

const BASE_URL = useRuntimeConfig().public.api_url

export const useHomeStore = defineStore('home-store', {
  state: () => ({
    homePageData: {}
  }),

  actions: {
    async getHomePageData() {
      this.homePageData = await $fetch(`${BASE_URL}/products`)
    }
  }
})

努克斯配置

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      api_url: process.env.BASE_URL
    }
  }
})

我有一个 vue 文件，我想在其中使用自定义类型：

/* 
file: /components/Grid.vue 
*/

<script setup>
// define Section type
interface Section {
  type: string;
  img: string;
  heading: string;
  content: string;
}

const props = defineProps < {
  sections: Section[],
  baseUrl: string
} > ();
const sections = ref(props.sections);
const baseUrl = ref(props.baseUrl);
</script>

它抛出ERROR [@vue/compiler-sfc] Unexpected reserved word 'interface'. (3:0) 。

我究竟做错了什么？