Visual Studio 2017 Asp.Net Core 2.1 TypeScript Vue Setup - Not SPA

Question

I have been researching this for weeks now (off and on) trying to setup a new project that uses the latest versions of Visual Studio, Vue, TypeScript and .Net Core as of today (05/15/2018). I do not need (nor want in this instance) to create a SPA application. So my .cshtml pages will at least have a tag that loads the specific file for that page. Sure, it may have one for Vue and/or Require.js?

I am having a hard time completely configuring Visual Studio to take .ts files and transpile them into .js files using the new ES6 coding styles with require and such.

Some of the more useful links I have attempted to incorporate were this and another here. Seems like perhaps .Net Core 2.1 may have changed things? I am also used to traditional .js files only. Many references to Visual Studio Code, but that is not an option here.

This seems like a simple task. NPM seems to download the internet into the project, but if it works, I'll take it. Just at my wits end here. What I would love is a step by step guide on creating a new VS project all the way to configuring the tsconfig.json and Webpack.config.js (if that is the best way to go) to having just a simple Vue app that displays "way to go dumbass!" for all I care. First 2 beers on me for the person who can write it up or get me to a link that does what I need in the current versions.

Thanks!

Answer 1

I recommend you to use the awesome Vue CLI 3 with Microsoft.AspNetCore.SpaServices.

Follow these steps:

1. dotnet add package Microsoft.AspNetCore.SpaServices
2. npm install -D aspnet-webpack
3. npm install -D webpack-hot-middleware
4. And add the Webpack middleware

if (env.IsDevelopment())
{
    app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
        HotModuleReplacement = true,
        HotModuleReplacementClientOptions = new Dictionary<string, string> { 
            { "reload", "true" }, 
        },
        ConfigFile = "node_modules/@vue/cli-service/webpack.config.js",
    });
}

For the moment I don't how to make HotModuleReplacement work without reloading.

5. Depending on your vue.config.js you can add js/css like this in the _Layout.cshtml for example

<environment names="Development">
    <script src="~/app.js" asp-append-version="true" type="text/javascript"></script>
</environment>
<environment names="Production">
    <script src="~/bundle/js/chunk-vendors.js" asp-append-version="true" type="text/javascript"></script>
    <script src="~/bundle/js/app.js" asp-append-version="true" type="text/javascript"></script>
</environment>

6. Finally you could organize the Vue files like this to have a better intellisense. It works great with Vetur for VSCode or non official extensions for VS2017.

MyComponent.vue

<template>
  ...
</template>

<style lang="scss" scoped>
  ...
</style>

<script lang="ts" src="./MyComponent.ts">
</script>

MyComponent.ts

import { Component, Vue } from "vue-property-decorator";

@Component
export default class MyComponent extends Vue {
  ...
}