將 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 外掛程式必須在 vue 外掛程式之後載入' 錯誤。 不知道如何從這裡繼續前進。我願意接受所有建議。

Answer 1

Astro 整合中的配置( @astrojs/vue 在本例中）被附加到您自己的Astro 設定中，因此vuetify# 外掛程式將首先在此處註冊。

解決方法是定義您自己的 Astro 整合，呼叫 updateConfig() 新增驗證：

// 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(),
  ],
})