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 — Bert
– Bert, Commented Sep 4, 2017 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: "<Target Name="RunWebpack"> <Exec Command="npm install" /> <Exec Command="webpack" /> </Target> <Target Name="BeforeBuild" DependsOnTargets="RunWebpack"></Target>" I don't know where i have to put it. — Johnson
– Johnson, Commented Sep 4, 2017 at 17:36
You have to edit the .csproj file for your project and add those lines. — Bert
– Bert, Commented Sep 4, 2017 at 17:41

tony19 · Accepted Answer · 2022-07-15 19:58:39Z

21

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.

edited Jul 15, 2022 at 19:58

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 4, 2017 at 17:43

exclsr

3,35725 silver badges27 bronze badges

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

7 Comments

Johnson Over a year ago

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!

exclsr Over a year ago

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?

Johnson Over a year ago

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.

exclsr Over a year ago

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 Over a year ago

Yeah, for compiling (after getting past this postcss.d.ts thing), I suggest looking into WebPack Task Runner Visual Studio extension.

|

Collectives™ on Stack Overflow

VueJS 2 + ASP.NET MVC 5

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related