CODEWITHSUNDEEP
vue.jswebpack
Eray Erdin
Eray Erdin

Reputation: 3179

Vue does not Render Template with Webpack, Compaining about Runtime Only Build

First, let me tell that my aim is to integrate Vue to my existing codebase. I have also found Webpack to be very useful and set it up to my needs. Not that I am very competent about webpack but get the basic idea and did it somehow.

In order to use Vue in an existing project, I chose to integrate it with plain Javascript, not compiling .vue files due to complexity, my project's requirements and also time. So, in my codebase, somewhere, I'd like to initialize a Vue instance targeting a DOM element and hardcode the template in my HTML. Let me show it in code to make it more clear. Below is a part of my HTML:

<div id="entry-component">
  <p>Hello {{ message }}!</p>
</div>

<!-- I use Django and `verbatim` here to escape Django templating inside. -->
<!-- Also, consider `component` here as a part of HTML page, not in sense of Vue.
     A page can have multiple `whatever-component` and initialize multiple `Vue` instances. -->

And also my Javascript files:

// app.js
// entry point for webpack

// some imports here...
import 'vue'
// I do this because I hardcoded my template (`message` variable) inside
// my HTML and only want runtime Vue.
import './components/entry.js'
// this contains my `Vue` instance

////////////////////////

// ./components/entry.js

import Vue from 'vue'
// otherwise it throws error complaining it cannot resolve what `Vue` is

const entryComponent = new Vue({
  el: "#entry-component",
  data: {message: "world"}
})

So, this compiles successfully. However, I fire up my dev server, go to related page containing this component and something odd happens.

Firstly, it does not even render Hello part. This actually means Vue successfully is loaded and mounted on the target DOM element. This is the part I do not get. I've already told "Replace {{message}} with message. Why does it not render it and completely wipes out the content of #entry-component?

Thanks in advance.

Troubleshooting

Runtime Vue Warning (?)

The other thing I think that might be relevant is the warning the browser throws in dev console:

[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.

This is probably because I did import 'vue' in my app.js. I exactly want runtime only Vue. I don't know if this causes for template hardcoded in HTML to not render. This seems like an error and don't know if it stops execution of the client-side Javascript.

Explicitly Importing Dist Build of Vue

The error above has given me some clues and wanted to try to explicitly import distribution builds of vue. I've imported below but no luck:

// app.js
// instead of > import 'vue'
import 'vue/dist/vue.js'  // still same error
import 'vue/dist/vue.esm.js'  // nope
import 'vue/dist/vue.common.js'  // no

I've also read README.md in dist folder. It says vue.js has all, includes compiler but still no luck.

Environment

Upvotes: 1

Views: 674

Answers (1)

Eray Erdin
Eray Erdin

Reputation: 3179

I have solved the problem myself and would like to share the answer for Googlers.

So, it appears to be that I've actually imported two different Vue builds. One is in app.js and the other is in the related component file.

import Vue from 'vue'

However, that Vue class actually builds up a bundle in which template compiler does not exist. So, you need to do two things:

  1. First, you need to delete the import on your entry file, in this case, app.js.
  2. Then you need to specify where you get your Vue class in your related file, in this case, the build including template compiler. See below:
// entry.js
import Vue from 'vue/dist/vue.js'
// this contains the template compiler

This solved my problem.

Upvotes: 1

Related Questions