Question

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

安装

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

安装 @astrojs/vue，需要在你的项目工程中依次运行以下命令：

• npm
• pnpm
• Yarn

npx astro add vue

pnpm astro add vue

yarn astro add vue

如果你有任何问题，欢迎随时在 GitHub 上开个 issue 来向我们报告 然后尝试执行以下的手动安装步骤。

手动安装

首先，安装 @astrojs/vue 包:

• npm
• pnpm
• Yarn

npm install @astrojs/vue

pnpm add @astrojs/vue

yarn add @astrojs/vue

大多数包管理器也会安装相关的对等依赖项。如果在启动 Astro 时看到 “Cannot find package ‘vue’” (或类似的)警告，则需要安装 Vue：

• npm
• pnpm
• Yarn

npm install vue

pnpm add vue

yarn add vue

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

astro.config.mjs

import { defineConfig } from 'astro/config';import vue from '@astrojs/vue';
export default defineConfig({
  // ...
  integrations: [vue()],
});

入门

要在 Astro 使用你的 Vue 组件，你可以移步我们的 UI 框架文档。你将会了解到：

• 如何加载框架组件
• 客户端合成注水选项
• 将框架混合和嵌套在一起的时机

疑难解答

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

你也可以查看我们的 Astro 集成文档 以获取集成的更多信息。

贡献

该 Astro 包是由核心团队维护的，欢迎提交 issue 和 PR！

选项

此集成由 @vitejs/plugin-vue 提供支持。要定制 Vue 编译器，你可以为集成提供选项。查看 @vitejs/plugin-vue 文档 获取更多详细内容。

astro.config.mjs

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


export default defineConfig({
  // ...
  integrations: [
    vue({
      template: {
        compilerOptions: {
          // 将任意以 ion- 开头的标签当做自定义元素
          isCustomElement: (tag) => tag.startsWith('ion-'),
        },
      },
      // ...
    }),
  ],
});

appEntrypoint

你可以拓展 Vue app 实例并将 appEntrypoint 选项设置为一个相对根目录的导入标识符 (例如： appEntrypoint: "/src/pages/_app")。

此文件的默认导出应该是一个接收 Vue App 实例的函数，允许使用 自定义 Vue 插件，app.use 和其他高级使用情形的定制。

astro.config.mjs

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


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

src/pages/_app.ts

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


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

jsx

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

astro.config.mjs

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 文档 获取更多细节内容。

astro.config.mjs

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


export default defineConfig({
  // ...
  integrations: [
    vue({
      jsx: {
        // 将任意以 ion- 开头的标签当做自定义元素
        isCustomElement: (tag) => tag.startsWith('ion-'),
      },
    }),
  ],
});

开发者工具

添加于： @astrojs/vue@4.2.0

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

astro.config.mjs

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


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

自定义 Vue DevTools

添加于： @astrojs/vue@4.3.0 新

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

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

astro.config.mjs

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


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

更多集成

UI 框架

• 

  @astrojs/alpinejs

• 

  @astrojs/lit

• 

  @astrojs/preact

• 

  @astrojs/react

• 

  @astrojs/solid⁠-⁠js

• 

  @astrojs/svelte

• 

  @astrojs/vue

SSR 适配器

• 

  @astrojs/cloudflare

• 

  @astrojs/netlify

• 

  @astrojs/node

• 

  @astrojs/vercel

其他集成

• 

  @astrojs/db

• 

  @astrojs/markdoc

• 

  @astrojs/mdx

• 

  @astrojs/partytown

• 

  @astrojs/sitemap

• 

  @astrojs/tailwind

Recipes