WebPack encore configuration for VueJS

Question

I have the following error when I load a page from a basic symfony App with VueJS and the bundle Webpack encore provided by symfony

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

So I need to change the alias of VueJS into webpack with this :

resolve: {
  alias: {
    vue: 'vue/dist/vue.js'
  }
}

But I didn't find anything into Webpack Encore to change this settings.

Webpack Encore : http://symfony.com/doc/current/frontend.html

FitzFish FitzFish · Accepted Answer · 2017-06-14T09:17:00

Does adding this line to your package.json solve the problem?

"browser": {
   "vue": "vue/dist/vue.common"
}

This is a special field for bundlers. So here we are replacing the default runtime-only release of vue by its compiler-included build.

When you specify a single string for the browser field, it will replace main and be the module entry point. The main field specifies the entry point to the module so by replacing it, you replace the entry point when the module is packaged by a bundler for browser use.

See the spec: https://github.com/defunctzombie/package-browser-field-spec

WebPack encore configuration for VueJS

1 Answers