Tambahkan Vuetify ke Astro: Panduan langkah demi langkah
P粉676821490
P粉676821490 2023-12-19 09:35:08
0
1
672

Saya menghadapi masalah menambahkan Vuetify 3 pada Astro menggunakan penyepaduan Vue. Inilah yang saya ada setakat ini:

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

Saya mendapat 'Vuetify 插件必须在 vue 插件之后加载' ralat. Tidak pasti bagaimana untuk meneruskan dari sini. Saya terbuka kepada semua cadangan.

P粉676821490
P粉676821490

membalas semua(1)
P粉964682904

Konfigurasi dalam Integrasi Astro ( @astrojs/vue 在本例中)被附加到您自己的 Astro 配置中,因此 vuetify Plugin akan didaftarkan di sini dahulu.

Penyelesaian adalah untuk menentukan Integrasi Astro anda sendiri, memanggil updateConfig() Tambah pengesahan:

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

Dan pasangkannya selepas penyepaduan Vue :

// astro.config.mjs
export default defineConfig({
  integrations: [
    vue(),
    vuetify(),
  ],
})
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan