At TIQ, we quickly fell in love with Vue.JS for its simplicity, flexibility and speed. That’s why we switched from AngularJS to Vue.js for our newest version. We also moved from .NET MVC to .NET Core.

But with all this new stuff, we were a bit confused how to make .NET Core and Vue.js play nice together. It took some time for us to get this set up well, so hopefully you’re able to cut some corners with this post.

Install .NET Core on Mac OS X

I’ve been using a Mac for web development for a long time, which didn’t really work that well with .NET MVC. But with .NET Core, it’s really easy to get started:

Now you should have the basic setup to get started with Vue.js.

Creating a Vue.js application for .NET Core

Now on to the Vue.js part. It took me while to find this, but there’s actually a quickstart Vue.js application.

First, install the Single Page Applications templates:

dotnet new --install Microsoft.AspNetCore.SpaTemplates

And then generate the Vue.js structure with:

dotnet new vue

Then, run:

npm install

Now, that was the easy part.

Building

Simply run this command:

dotnet build

Debugging

First try building. If that works, you should have a /bin folder

Open /.vscode/launch.json and change (2 occurences):

${workspaceRoot}/bin/Debug/<insert-target-framework-here>/<insert-project-name-here>.dll

You should be able to derive the target framework and project name from the /bin/Debug folder structure that was created during the building process.

In my case, I also had to add the ‘build’ task in /.vscode/tasks.json:

{
    "label": "build",
    "command": "dotnet build",
    "type": "shell",
    "group": "build",
    "presentation": {
        "reveal": "silent"
    },
    "problemMatcher": "$msCompile"
}

After this, you should be able to debug using VSCode’s debugger (shortcut: CMD+SHIFT+D.

Optional: disable TypeScript, enable Javascript

I’m not too familiar with TypeScript and wanted to use Javascript instead. You can do this with the following modifications:

  • Create ClientApp/boot.js with the following contents.
import Vue from 'vue'
import App from './components/app/app.vue.html'

new Vue({
    el: '#app',
    render: h => h(App)
})
  • Remove ClientApp/boot.ts
  • Remove tsconfig.json
  • In .vscode/tasks.json comment-out the TypeScript-specific stuff
  • In webpack.config.js, comment-out the lines related to CheckerPlugin, the .ts file extension and change boot.ts to boot.js

Optional: Setup VSCode

Hide irrelevant stuff from your VSCode menus by adding a file called /.vscode/settings.json with these contents:

{
    "files.exclude": 
    {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "**/bin": true,
        "**/obj": true,
        "**/node_modules": true,
        "package-lock.json": true,
        "npm-shrinkwrap.json": true
    }
}
Sources