Vuetify zu Astro hinzufügen: Eine Schritt-für-Schritt-Anleitung
P粉676821490
P粉676821490 2023-12-19 09:35:08
0
1
673

Ich habe Probleme beim Hinzufügen von Vuetify 3 zu Astro über die Vue-Integration. Das habe ich bisher:

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

Ich erhalte 'Vuetify 插件必须在 vue 插件之后加载'Fehler. Ich bin mir nicht sicher, wie ich von hier aus weitermachen soll. Ich bin für alle Vorschläge offen.

P粉676821490
P粉676821490

Antworte allen(1)
P粉964682904

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(),
  ],
})
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage