CODEWITHSUNDEEP
vue.jsnpmwebpackpackage.json
obe
obe

Reputation: 7806

How to use Vuejs with template compiler with Webpack

I'm using Webpack.

I loosely followed this tutorial to configure Vuejs into my build: https://medium.com/js-dojo/how-to-configure-webpack-4-with-vuejs-a-complete-guide-209e943c4772

I was able to get it to work, but when I tried to render a template, I got an error (in the browser): "You are using the runtime-only build of Vue where the template compiler is not available.".

The actual Vuejs installation under node_modules has several variations, including the full package with the compiler, which is what I want.

However, Webpack decides to include the runtime version.

I dag some more, and found that if I modify node_modules/vue/package.json, and change its main key from dist/vue.runtime.common.js to dist/vue.common.js and its module key from dist/vue.runtime.esm.js to dist/vue.esm.js - Webpack DOES pick the full version.

I am looking for a way to get this effect without changing Vue's own package.json. I found this: How do I override nested NPM dependency versions? , and tried the accepted answer, but it didn't seem to have any effect.

Can anyone tell me the "right way" to achieve my goal, i.e. to have Webpack include the full version of Vuejs, instead of just the runtime?

Upvotes: 0

Views: 1940

Answers (1)

Eric Day
Eric Day

Reputation: 152

The answer you are looking for is contained in Vue's installation:

https://v2.vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds

In the dist/ directory of the NPM package you will find many different builds of Vue.j...

Runtime: code that is responsible for creating Vue instances, rendering and patching virtual DOM, etc. Basically everything minus the compiler...

Runtime + Compiler vs. Runtime-only If you need to compile templates on the client (e.g. passing a string to the template option, or mounting to an element using its in-DOM HTML as the template), you will need the compiler and thus the full build

Upvotes: 2

Related Questions