dcranmer's avatar

(Solved) Migrate Laravel9/Vue2 to Vite: You are using the runtime-only build of Vue ...

Not sure what's causing this, but it's preventing my content from loading. Anywhere there's supposed to be content, I see this in devtools:

<!--function(a, b, c, d) { return createElement$1(vm, a, b, c, d, true); }-->

I am using all single-page Vue components. I'm not getting any vite compile errors. But apparently my vue templates are not getting compiled, and I'm not sure why. I've removed the vue-template-compiler, but this should be taken care of in vite, shouldn't it? My vite.config.js:

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue2'

export default defineConfig({
  plugins: [
    laravel({
      input: [
        'resources/sass/app.scss',
        'resources/js/main.js',

      ],
      refresh: true,
    }),
    vue({}),
  ],
})
0 likes
6 replies
andrevwv's avatar

Hi. Did you find a solution? I am experiencing the same issue

dcranmer's avatar
dcranmer
OP
3 years ago
Best Answer
Level 6

Yes. This seemed to do the trick. In vite.config.js:

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue2'

export default defineConfig({
  resolve: {
    alias: {
      vue: 'vue/dist/vue.esm.js',
    },
  },

And, if you don't have them already, make sure you have both vue plugins and the laravel plugin installed in package.json.

I didn't see this tidbit documented anywhere, but after a lot of searching, found this in a vite issue on github. One problem is that most vite stuff is geared towards vue3 (my next migration project), which I guess is understandable.

As for why it's needed, I'm no webpack expert, but webpack must use a certain (the runtime?) build by default, and you have to add the vue-template-compiler, too. In the (webpack-less) world of vite, you may have to specify a build if it's vue2? Or something like that.

8 likes
Olixr's avatar

@pweil This was the fix for me as well on vue 2.7. I was migrating an old project to vite from laravel mix. My vue files were not compiling correctly. After adding in the alias for vue the compiled pages work as normal again.

Eventually need to update vue and all the other items but this gets back to a working state with only having replaced laravel mix with vite 5+

Cheers!

2 likes

Please or to participate in this conversation.