如何将 Vuetify 添加到 astro？

Question

使用 Vue 集成时，我在将 Vuetify 3 添加到 Astro 时遇到问题。 这是我到目前为止所拥有的：

import { defineConfig } from 'astro/config';

import vue from '@astrojs/vue';

import vuetify from 'vite-plugin-vuetify';

// https://astro.build/config
export default defineConfig({
  integrations: [vue()],
  vite: {
    ssr: {
      noExternal: ['vuetify'],
    },
    plugins: [vuetify()],
  },
});

我收到

'Vuetify plugin must be loaded after the vue plugin'

错误。 不知道如何从这里继续前进。我愿意接受所有建议。

Answer 1

Astro 集成中的配置（在本例中为

@astrojs/vue

）会附加到您自己的 Astro 配置中，因此

vuetify

插件将首先在此处注册。

解决方法是定义您自己的 Astro 集成，调用

updateConfig()

添加 Vuetify：

// astro.config.mjs
import vuetifyPlugin from 'vite-plugin-vuetify';

/**
 * Vuetify integration for Astro
 * @param {import('astro/config').Options} options
 * @returns {import('astro/config').AstroIntegration}
 */
function vuetify(options) {
  return {
    name: 'my-astro-vuetify-integration',
    hooks: {
      'astro:config:setup': ({ updateConfig }) => {
        updateConfig({
          vite: {
            ssr: {
              noExternal: ['vuetify'],
            },
            plugins: [vuetifyPlugin()],
          },
        });
      },
    },
  }
}

并在Vue集成后安装它：

// astro.config.mjs
export default defineConfig({
  integrations: [
    vue(),
    vuetify(),
  ],
})

Answer 2

这个答案已在其他地方引用过，所以我想它应该指向正确的方向。但我不明白的是如何处理传递给 vuetify 方法的选项。该方法似乎根本没有使用它们...