Vitest config for Laravel and Vue

Question

I have a Laravel 12 project built with the Vue starter kit. By default, the project didn't have any frontend testing libraries. I want to add tests in Vitest. When I run vitest, I get the error: Error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files. This package is already installed during laravel new *app*. In the vite.config.ts file, I see it is imported by default. What's the problem?

// vitest.config.ts
import { defineConfig } from "vitest/config";
import path from "path";

export default defineConfig({
    test: {
        globals: true,
    },

    root:  path.resolve(__dirname, './resources/js/__tests__'),

    resolve: {
        alias: {
            '@' : path.resolve(__dirname, './resources/js')
        },
    }
});

// vite.config.ts
import { wayfinder } from '@laravel/vite-plugin-wayfinder';
import tailwindcss from '@tailwindcss/vite';
import vue from '@vitejs/plugin-vue';
import laravel from 'laravel-vite-plugin';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.ts'],
            ssr: 'resources/js/ssr.ts',
            refresh: true,
        }),
        tailwindcss(),
        wayfinder({
            formVariants: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

Silikazi · Accepted Answer · 2025-11-10 05:14:28Z

no vue() plugin. Also setting root to ./resources/js/__tests__ also means Vite/Vitest treats that as the app root, not your Laravel project root, which can confuse plugin resolution.

Try putting Vitest config into vite.config.ts you can just only use vite.config.ts and configure vitest on same(vite.config.ts) ignore vitest.config.ts

// vite.config.ts
import { wayfinder } from '@laravel/vite-plugin-wayfinder';
import tailwindcss from '@tailwindcss/vite';
import vue from '@vitejs/plugin-vue';
import laravel from 'laravel-vite-plugin';
import { defineConfig } from 'vitest/config'; 

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/js/app.ts'],
      ssr: 'resources/js/ssr.ts',
      refresh: true,
    }),
    tailwindcss(),
    wayfinder({
      formVariants: true,
    }),
    vue({
      template: {
        transformAssetUrls: {
          base: null,
          includeAbsolute: false,
        },
      },
    }),
  ],

  test: {
    globals: true,
    environment: 'jsdom',
    include: ['resources/js/__tests__/**/*.{test,spec}.{js,ts,jsx,tsx}'],
  },
});

Collectives™ on Stack Overflow

Vitest config for Laravel and Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related