CODEWITHSUNDEEP
webpackvue.jshugo
nazreen
nazreen

Reputation: 2078

webpack + Vue: Vue app not rendering

I am new to Vue and this is my first time manually configuring webpack. My previous experiences with webpack always had it abstracted behind another framework, i.e. webpack as part of create-react-app. The issue is that my new configuration doesn't work. As a sidenote, this is all part of a Hugo site.

My previous configuration but my new one doesn't.

Previous configuration:

Notes:

list.html:

<head>
    <script src="vue_cdn_here"></script>
</head>
<body>
    <div id="vue-list>
        <template>
           ....
        </template>
    <div>
    <script src="vue-list.js"></script>
</body>

vue-list.js:

new Vue({
    el: '#vue-list',
    ...
})

form.html:

<head>
    <script src="vue_cdn_here"></script>
</head>
<div id="vue-form>
    <template>
        ...
    </template>
<div>
<script src="vue-form.js"></script>

vue-form:

new Vue({
    el: '#vue-form',
    ...
})

I left out the methods and data parts for brevity. Everything worked fine. Vue app rendered on both pages and functioned well.

What I'm trying to do is to bundle the JS using webpack. This is to reduce number of production files and to cache-bust. Previous setup would result in about 10 separate JS files.

Current setup that's not quite working yet:

list.html/form.html:

<head>
    // no scripts in head anymore
</head>
<body>
    <div id="respective_id_here">
        <template>
            // view code here
        </template>
    </div>
    <script src="bundle.js"></script>
</body>

_index.js:

...
import './vue-list';
import './vue-form';
...

webpack.config.js:

module.exports = {
    entry: './static/js/_index.js',
    output: {
        path: __dirname,
        filename: './static/js/bundle.js'
    }
};

The issue is that, in the rendered HTML, at the location where the Vue app is supposed to be generated, i.e. div#vue-list, is something else, like so:

<head>
</head>
<body>
<!--function(e,n,r,i){return sn(t,e,n,r,i,!0)}-->
</body>

I would like to keep the one-app-per-page structure that we have currently instead of turning it all into a single-page-application. One of the main allures of Vue is how it's supposed to be easy to do incremental migration rather than a whole architecture overhaul.

I would appreciate any hints for this issue. Thank you.

Upvotes: 1

Views: 1788

Answers (2)

Barris
Barris

Reputation: 1019

The mistake is that you are declaring <template> ... tags within your html. The template must be declared when you create the Vue instance https://v2.vuejs.org/v2/api/#template

Solution
Change

<div id="vue-form>
    <template>
        ...
    </template>
<div>

To

<div id="vue-form/>

And change

new Vue({
  el: '#vue-form',
  ...
})

To

new Vue({
  el: '#vue-form',
  template: `<div> content goes here... </div>`
})

Upvotes: 0

Swati
Swati

Reputation: 575

I am not sure if you are still stuck with this issue.

I suggest you create fresh vue app using vue-cli with webpack template and then add views one by one. There is no need to edit webpack.config.js in this case. 

vue init webpack <project-name>

Upvotes: 3

Related Questions