@astrojs/ vue

此 Astro 整合为你的 Vue 3 组件启用服务器端渲染和客户端水合作用。

¥This Astro integration enables server-side rendering and client-side hydration for your Vue 3 components.

安装

¥Installation

Astro 包含一个 astro add 命令来自动设置官方集成。如果你愿意，你可以改用安装集成手动。

¥Astro includes an astro add command to automate the setup of official integrations. If you prefer, you can install integrations manually instead.

要安装 @astrojs/vue，请从项目目录运行以下命令并按照提示操作：

¥To install @astrojs/vue, run the following from your project directory and follow the prompts:

npx astro add vue

pnpm astro add vue

yarn astro add vue

如果你遇到任何问题，请请随时在 GitHub 上向我们报告并尝试下面的手动安装步骤。

¥If you run into any issues, feel free to report them to us on GitHub and try the manual installation steps below.

手动安装

¥Manual Install

首先，安装 @astrojs/vue 包：

¥First, install the @astrojs/vue package:

npm install @astrojs/vue

pnpm add @astrojs/vue

yarn add @astrojs/vue

大多数包管理器也会安装相关的对等依赖。如果你在启动 Astro 时看到 “找不到包 ‘vue’“（或类似）警告，则需要安装 Vue：

¥Most package managers will install associated peer dependencies as well. If you see a “Cannot find package ‘vue’” (or similar) warning when you start up Astro, you’ll need to install Vue:

npm install vue

pnpm add vue

yarn add vue

然后，使用 integrations 属性将集成应用于你的 astro.config.* 文件：

¥Then, apply the integration to your astro.config.* file using the integrations property:

import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue()],
});

入门

¥Getting started

要在 Astro 中使用你的第一个 Vue 组件，请前往我们的 UI 框架文档。你将探索：

¥To use your first Vue component in Astro, head to our UI framework documentation. You’ll explore:

📦 如何加载框架组件，
💧 客户端水合选项，以及
🤝 将框架混合和嵌套在一起的机会

故障排除

¥Troubleshooting

如需帮助，请查看 Discord 上的 #support 通道。我们友好的支持小队成员随时为你提供帮助！

¥For help, check out the #support channel on Discord. Our friendly Support Squad members are here to help!

你还可以查看我们的 Astro 集成文档了解有关集成的更多信息。

¥You can also check our Astro Integration Documentation for more on integrations.

贡献

¥Contributing

该软件包由 Astro 的核心团队维护。欢迎你提交问题或 PR！

¥This package is maintained by Astro’s Core team. You’re welcome to submit an issue or PR!

选项

¥Options

该集成由 @vitejs/plugin-vue 提供支持。要自定义 Vue 编译器，可以为集成提供选项。有关详细信息，请参阅 @vitejs/plugin-vue docs。

¥This integration is powered by @vitejs/plugin-vue. To customize the Vue compiler, options can be provided to the integration. See the @vitejs/plugin-vue docs for more details.

import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [
    vue({
      template: {
        compilerOptions: {
          // treat any tag that starts with ion- as custom elements
          isCustomElement: (tag) => tag.startsWith('ion-'),
        },
      },
      // ...
    }),
  ],
});

appEntrypoint

你可以扩展 Vue app 实例，将 appEntrypoint 选项设置为根相对导入说明符（例如 appEntrypoint: "/src/pages/_app"）。

¥You can extend the Vue app instance setting the appEntrypoint option to a root-relative import specifier (for example, appEntrypoint: "/src/pages/_app").

该文件的默认导出应该是一个在渲染之前接受 Vue App 实例的函数，允许使用自定义 Vue 插件、app.use 和其他高级用例的自定义。

¥The default export of this file should be a function that accepts a Vue App instance prior to rendering, allowing the use of custom Vue plugins, app.use, and other customizations for advanced use cases.

import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue({ appEntrypoint: '/src/pages/_app' })],
});

import type { App } from 'vue';
import i18nPlugin from 'my-vue-i18n-plugin';

export default (app: App) => {
  app.use(i18nPlugin);
};

jsx

你可以通过设置 jsx: true 来使用 Vue JSX。

¥You can use Vue JSX by setting jsx: true.

import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue({ jsx: true })],
});

这将为 Vue 和 Vue JSX 组件启用渲染。要自定义 Vue JSX 编译器，请传递选项对象而不是布尔值。有关详细信息，请参阅 @vitejs/plugin-vue-jsx docs。

¥This will enable rendering for both Vue and Vue JSX components. To customize the Vue JSX compiler, pass an options object instead of a boolean. See the @vitejs/plugin-vue-jsx docs for more details.

import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [
    vue({
      jsx: {
        // treat any tag that starts with ion- as custom elements
        isCustomElement: (tag) => tag.startsWith('ion-'),
      },
    }),
  ],
});

devtools

Added in: @astrojs/vue@4.2.0

你可以通过将带有 devtools: true 的对象传递给你的 vue() 集成配置来在开发中启用 Vue DevTools：

¥You can enable Vue DevTools in development by passing an object with devtools: true to your vue() integration config:

import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue({ devtools: true })],
});

自定义 Vue DevTools

¥Customizing Vue DevTools

Added in: @astrojs/vue@4.3.0

为了进行更多自定义，你可以传递 Vue DevTools Vite 插件支持的选项。（注意：不支持 appendTo。）

¥For more customization, you can instead pass options that the Vue DevTools Vite Plugin supports. (Note: appendTo is not supported.)

例如，如果你不使用 Visual Studio Code，则可以将 launchEditor 设置为你首选的编辑器：

¥For example, you can set launchEditor to your preferred editor if you are not using Visual Studio Code:

import { defineConfig } from "astro/config";
import vue from "@astrojs/vue";

export default defineConfig({
  // ...
  integrations: [
    vue({
      devtools: { launchEditor: "webstorm" },
    }),
  ],
});