跳转到内容

@astrojs/ vue

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

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

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

Terminal window
npx astro add vue

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

首先,安装 @astrojs/vue 包:

Terminal window
npm install @astrojs/vue

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

Terminal window
npm install 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-'),
},
},
// ...
}),
],
});

你可以拓展 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: 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 })],
});

添加于: @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 框架

SSR 适配器

其他集成

贡献

你有什么想法?

社区