Why am I doing this?

We are starting to use Vue.js at work and I wanted to get familiar with it and possibly use it in my personal projects. At the time we are not using Webpack with Vue.js, but we are planning on using it at some stage so I also wanted to learn about Webpack.

What is Vue.js?

Vue.js is yet another Javascript web framework, but with a twist.

... Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

My only experience with Javascript web frameworks are Ember and Angular tutorials on Code School, so I can't comment much on how good it is, but I like the idea of plugging in only what you need.

What is Webpack?

Webpack seems to do a lot of things, but according to Webpack

// webpack is a module bundler
// This means webpack takes modules with dependencies
// and emits static assets representing those modules.

From what I can tell this takes all of your Javascript code and its dependencies and plugs them all into one file. I will talk about how this works with Vue later on.

Lots of ways to get started with Vue.js

There are lots of ways to get started with Vue.js and I tried a number of them. The easiest way was to use the vue-cli to scaffold a few projects and see how they work.

There are handful of templates listed on the Github README. I just followed the instructions on the Github page.

Webpack-simple

I looked the most closely at webpack-simple. I used this as an example to adapt to my GraphIVR .NET MVC app. You can find the source code on my Github.

Webpack-simple includes a number of Vue related libraries in a package.json file.

• vue
• vue-loader
• vue-style-loader
• vue-template-compiler

It also includes a bunch of babel libraries and other things. Your version may vary.

After init'ing the vue template you chose, you can install the node packages. There is a README to help.

GraphIVR WebHost Setup

GraphIVR WebHost is a basic .NET MVC app that I created from the ASP.NET project template.

See the source code on my Github

1. I copied package.json into the root of my project and changed the name to "my app".
   
2. The template includes a src folder. In GraphIVR I created a folder called vue_src in the root.
3. Under the src folder there in a app.vue and main.js file. Under vue_src I created app.vue and copied main.js. Main.js will be the "entry point" for Webpack. I didn't copy app.vue because I wanted it to be dead-simple.
4. I did not create a "dist" folder because Webpack will create this for me when it packs up my modules and dependencies.
5. I copied the .babelrc config file into the root. Babel is used by Webpack to transpile Vue into older versions of Javascript.
6. I copied the webpack.config.js file into the root and then made changes to fit the GraphIVR WebHost

webpack.config.js

Since I named my src and dist folders differently, I changed the module.exports entry and output paths to vue_src and vue_dist. After some troubleshooting I also ended up chaning the path to the "vue$" alias to include the node_modules folder.

module.exports = {
    entry: './vue_src/main.js',
    output: {
        path: path.resolve(__dirname, './vue_dist'),
        publicPath: '/vue_dist/',
        filename: 'build.js'

:
:
: 

resolve: {
        alias: {
            'vue$': './../node_modules/vue/dist/vue.common.js'
        }
    },

:
:
:

Views/Vue

I created a View and Controller for the vue page.

/Views/Vue/Index (.cshtml)
and
ViewController -- Index()

In the Index file I put this code. The script source points to the "dist" build that is created by Webpack.

    <div id="app">

    </div>
    <script src="../vue_dist/build.js"></script>

Running webpack

Once you get your modules and webpack config setup you can run the webpack command to produce the build.

cd /<root of project where you see the webpack.config.js file>
webpack --display-error-details

Using the --display-error-details flag is really helpful in finding misconfigurations.

If this runs you should see a build.js file in the dist folder (vue_dist for me).

app.vue

My app.vue file contains a template, a script for the model data, and a style tag.

<template>
    <h1 class="message">{{ msg }}</h1>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello World!  Using vue-loader.'
    }
  }
}
</script>

<style>
    .message {
        color: blue;
    }
</style>

This stuff should get injected into any tag with id=app, which is coded in the main.js file.

import Vue from 'vue'
import App from './app.vue'

new Vue({
    el: '#app',
    render: h => h(App)
})

Run the app

Click the little green arrow in Visual Studio and then navigate to your vue page. In my case it was like this:

http://localhost:53193/vue

... ta da! I see Hello world! Using the vue-loader.

Thoughts

This was a lot easier once I learned about the vue-cli and the webpack flag --display-error-details.

I am looking forward to working with Vue. The documentation is pretty good so far and there seems to be a large community. At work I will be using it with PHP and eventually Laravel, and this seems to be a popular combination.

Be careful about the Node package versions because I had trouble with that early on. Visual Studio seems to have some intellisense that helps with this.