Add Vuetify to Astro: A step-by-step guide

Question

I'm having trouble adding Vuetify 3 to Astro using the Vue integration. This is what I have so far:

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

I get the 'Vuetify plugin must be loaded after the vue plugin' error. Not sure how to move on from here. I'm open to all suggestions.

Answer 1

The configuration in the Astro integration ( @astrojs/vue in this case) is appended to your own Astro configuration, so the vuetify plugin will Start by registering here.

The workaround is to define your own Astro integration and call updateConfig() Add validation:

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

And install it after Vue integration :

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