Simple Vue.js with webpack

Question

I know basically nothing about javascript/webpack/npm/whatever but I am trying a simple Vue.js app.

It looks like this:

index.html

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue Test</title>
  </head>
  <body>
    <div class="vue-app">
      {{ message }}
    </div>
    <script src="/static/testvue.bundle.js"></script>
  </body>
</html>

main.js

import Vue from 'vue';

new Vue({
    data: {
        message: 'Testing Vue'
    },
    el: '.vue-app'
});

webpack.config.js

var path = require('path');

module.exports = {
    entry: './main.js',
    output: {
        filename: 'testvue.bundle.js',
        path: path.join(__dirname, '')
    },
    devServer: {
        inline: true,
        port: 8080
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',

                query: {
                    presets: ['es2015']
                }
            }
        ]
    }
};

When I go to the webpage, it is blank and I see this in the "elements" in the console:

<!--function (e,n,r,o){return Ce(t,e,n,r,o,!0)}-->

Any idea what's going on and how to make it work? It's like it's trying to do something, but something doesn't line up. I've tried changing a few things that I have seen differently like using #vue-app instead of .vue-app or changing it to be under 'body' and then putting the {{message}} directly into the body but that doesn't help and I dont know what the difference is.

You'll probably need the Vue webpack loader: github.com/vuejs/vue-loader — Phix
– Phix, Commented Dec 6, 2017 at 2:09
the vue-loader is meant for .vue template files, no? It shouldn't be needed for a simple variable replacement... — MichaelB
– MichaelB, Commented Dec 6, 2017 at 2:10

tony19 · Accepted Answer · 2022-07-15 02:45:19Z

3

So, looks like the issue is that webpack wants the "ESM" version of Vue.

You can add some stuff to the webpack.config.js as per: https://v2.vuejs.org/v2/guide/installation.html

And then it seems to start working.

Code snippet

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

I am not sure what the difference is or why this matters though.

edited Jul 15, 2022 at 2:45

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 6, 2017 at 2:30

MichaelB

1,1323 gold badges17 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kavindra · Accepted Answer · 2017-12-06 02:13:58Z

-1

You need to return message in data.

new Vue({
        data() {
            return {
              message: 'Testing Vue'
            }
        },
        el: '.vue-app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.min.js"></script>
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue Test</title>
  </head>
  <body>
        <div class="vue-app">
      {{ message }}
        </div>
    <script src="/static/testvue.bundle.js"></script>
  </body>
</html>

answered Dec 6, 2017 at 2:13

Kavindra

1,7072 gold badges15 silver badges19 bronze badges

1 Comment

Bert Over a year ago

Data functions that return an object are only necessary for components.

Collectives™ on Stack Overflow

Simple Vue.js with webpack

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related