VueJS 2 + ASP.NET MVC 5

Question

I'm very new with VueJS. I have to build a single page application inside a ASP.NET MVC5.

I follow this tutorial and works very well -> TUTORIAL

But when i create a .vue page to test VueJS2 Routes, the browser does not understand "Import", i read that i have to use a transpiler like Babel, someone know how i solve it?

App.VUE

    <template>
    <div id="app">
        {{msg}}
    </div>
</template>

<script>
    export default {
      name: 'app',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
</script>

App.JS

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


new Vue({
    el: '#app',
    router,
    render: h => h(App),
    data: {
        message: 'Hello Vue! in About Page'
    }
});

_Layout.cshtml

<div class="container-fluid">
        @RenderBody()

        <div id="app">
            { { message } }
        </div>
    </div>


    <script src="~/Scripts/essential/jquery-3.1.1.min.js"></script>
    <script src="~/Scripts/essential/bootstrap.min.js"></script>
    <script src="~/Scripts/essential/inspinia.js"></script>
    <script src="~/Scripts/essential/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.js"></script>

    <script src="~/Scripts/app.js"></script>
    <script src="~/Scripts/plugin/metisMenu/jquery.metisMenu.js"></script>
    <script src="~/Scripts/plugin/pace/pace.min.js"></script>
    <script src="~/Scripts/plugin/slimscroll/jquery.slimscroll.min.js"></script>

Thanks a lot!!

Possible duplicate of [Best approach when replacing jQuery with VueJS 2 in multi-page existing .NET MVC application](https://stackoverflow.com/questions/42541315/best-approach-when-replacing-jquery-with-vuejs-2-in-multi-page-existing-net-mvc) — Bert, Sep 04 '17 at 17:11
Yeah! I saw that @Bert, i do the "Extremely Basic" tutorial. But when i tried the second one. But i didn't understand the last part when he talks about this part: " " I don't know where i have to put it. — Johnson, Sep 04 '17 at 17:36
You have to edit the .csproj file for your project and add those lines. — Bert, Sep 04 '17 at 17:41

score 21 · Accepted Answer · edited Jul 15 '22 at 19:58

Welcome to Vue.js development! Yes, you are correct, you need something to translate the import statements into JavaScript that the browsers can handle. The most popular tools are webpack and browserify.

You are also using a .vue file, which needs to be converted (with vue-loader) before the browser can pick it up. I am going to lay out how to do this, and set up webpack, which involves a few steps. First, the HTML we're working with looks something like this:

<html>
   <head>
   </head>
   <body>
      <div class="container-fluid">
        <div id="app">
            { { message } }
        </div>
      </div>
      <script src="./dist.js"></script>
   </body>
</html>

Our goal is to use webpack to bundle / compile App.vue and app.js into dist.js. Here is a webpack.config.js file that can help us do that:

module.exports = {
   entry: './app.js',
   output: {
      filename: 'dist.js'
   },
   module: {
     rules: [
       {
         test: /\.vue$/,
         loader: 'vue-loader'
       }
     ]
   }
}

This configuration says, "start in app.js, replace import statements as we come across them, and bundle it into a dist.js file. When webpack sees a .vue file, use the vue-loader module to add it to dist.js."

Now we need to install the tools / libraries that can make this happen. I recommend using npm, which comes with Node.js. Once you have npm installed, you can put this package.json file in your directory:

{
  "name": "getting-started",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack"
  },
  "dependencies": {
    "css-loader": "^0.28.7",
    "vue": "^2.4.2",
    "vue-loader": "^13.0.4",
    "vue-resource": "^1.3.3",
    "vue-router": "^2.7.0",
    "vue-template-compiler": "^2.4.2",
    "webpack": "^3.5.5"
  }
}

And do the following:

Run npm install to get all of the packages.
Run npm run-script build to generate your dist.js file via webpack.

Note in the example for this question, router is undefined in app.js, but here is a fixed-up file:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

var router = new VueRouter();

new Vue({
    el: '#app',
    router,
    render: h => h(App),
    data: {
        message: 'Hello Vue! in About Page'
    }
});

That should be it! Let me know if you have any questions.

Thanks for answer, i do everything you saw, the dist.js file was created successful. So i tried to Build my _Layout.cshtml on visual studio 2015, and there are a lot of errors about "Missing JSDoc for parameters '...' " How can i compile this? Thanks! — Johnson, Sep 04 '17 at 18:42
Ok great. Do you think these errors are caused by a linter, e.g. ESLint or something similar (like the Visual Studio TypeScript compiler)? Getting it to build might depend on your specific setup ... you might have to tell Visual Studio to ignore the node_modules folder? — exclsr, Sep 04 '17 at 18:51
i dont know why this errors are appearing to me, i tried to "Include in Project" the Node Modules folder, but did not work... =( Do i have download some visual studio extention? I have a Typescript extention, i will unistall and try again. — Johnson, Sep 04 '17 at 18:56
Yeah, try to turn off the Visual Studio TypeScript compiler if you can. It should work without any special extensions ... Eventually, you might want to get the NPM Task Runner and WebPack Task Runner extensions to make your webpack build automatically when you save files. — exclsr, Sep 04 '17 at 19:14
Ok, now there are only 7 errors in "postcss.d.ts". the errors are the same on different lines: "Build: Duplicate identifier 'export='." I did not change this file once. — Johnson, Sep 04 '17 at 19:16
I really want to use Visual Studio to compile my Vue projects. It does not necessary have to be MVC .NET... I'm using .NET MVC because that was the only way i found to compile in VS2015 — Johnson, Sep 04 '17 at 19:18
Yeah, for compiling (after getting past this postcss.d.ts thing), I suggest looking into WebPack Task Runner Visual Studio extension. — exclsr, Sep 04 '17 at 19:27

VueJS 2 + ASP.NET MVC 5

1 Answers1

Linked