Vue version

3.3.9

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-jjdutd?file=src%2Fmain.js

Steps to reproduce

If you use vue.esm-bundler.js alias in vite.config.js:

export default defineConfig({
    resolve: {
        alias: {
            '@': '/resources/js',
            'vue': './node_modules/vue/dist/vue.esm-bundler.js',
        }
    },
    plugins: [
        laravel([
            'resources/js/app.js'
        ]),
        vue(),
    ]
});

Then create a pinia storage and a component that has: <h1>Counter: {{ numbersStore.number }}</h1>

When the number is updated, it doesn't update the number in the template.

It happens in dev environment.

What is expected?

It is expected that when a state is updated, all parts of the template that use this state are updated as well.

What is actually happening?

When we use esm-bundler in alias, pinia loses its reactivity. Parts of the component template that use a pinia state are not updated after the state changes.

System Info

Chrome
Windows 10
Laravel 10
Vite
"laravel-vite-plugin": "^0.8.1"
"@vitejs/plugin-vue": "^4.5.0"

Any additional comments?

The fix for this is removing vue.esm-bundler.js from aliases and instead, create Vuejs app like this:

import { createApp } from 'vue/dist/vue.esm-bundler';

This was, when we change a Pinia state, it reflects in the component template.

Working example

Not working example

the relative path you are using is messing it up, as it will point to different copies of vue for your project and the nested node:_modules dir in the pinia package.

import { defineConfig } from 'vite';
import { fileURLToPath } from 'url';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      vue: fileURLToPath(
        new URL('./node_modules/vue/dist/vue.esm-bundler.js', import.meta.url)
      ),
    },
  },
  plugins: [vue()],
});

https://stackblitz.com/edit/vitejs-vite-xeqgmj?file=vite.config.js,package.json,src%2Fmain.js,src%2FApp.vue,src%2Fstores%2Fnumbers.js,src%2Fcomponents%2FCounter.vue

In some case if you want to use Vue template syntax inside Laravel (blade/php) you can check this stackblitz

https://stackblitz.com/edit/vitejs-vite-pg6azb?file=src%2FApp.vue