CODEWITHSUNDEEP
javascriptvue.jswebpackvuejs2
MichaelB
MichaelB

Reputation: 1132

Simple Vue.js with webpack

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.

Upvotes: 1

Views: 125

Answers (2)

MichaelB
MichaelB

Reputation: 1132

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.

Upvotes: 3

Kavindra
Kavindra

Reputation: 1707

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>

Upvotes: -1

Related Questions