Asp.Net Core and VueJS bootstrapping guide

Requirements

1. Visual Studio / Visual Studio Code
2. NodeJS
3. npm/yarn
4. .Net 5 SDK

Creating Asp.Net Core app

1. Install templates

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

2. Create Empty directory with name of your project

mkdir AspVueDemo

3. Create app from template

dotnet new vue

4. [optional] Create GIT repository

git init

Removing TypeScript from project

1. Remove from package.json following lines:

    "@types/webpack-env": "^1.13.0",
    "awesome-typescript-loader": "^3.0.0",
    "bootstrap": "^3.3.6",
    "jquery": "^3.1.1",
    "typescript": "^2.2.1",
    "vue-property-decorator": "^5.0.1",

2. Delete tsconfig.json

3. Edit webpack.config.js

Remove this line:

const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

then modify two lines:

        resolve: { extensions: [ '.js', '.ts' ] },
        entry: { 'main': './ClientApp/boot.ts' },

like this:

        resolve: { extensions: [ '.js' ] },
        entry: { 'main': './ClientApp/boot.js' },

4. Remove anything related to TypeScript from module: object section

        module: {
            rules: [
                { test: /\.vue\.html$/, include: /ClientApp/, loader: 'vue-loader'},
                { test: /\.css$/, use: isDevBuild ? [ 'style-loader', 'css-loader' ] :
 ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },

5. Remove newCheckerPlugin() from plugins:[] array section

Replacing default components

1. Remove everything within the ClientApp/components directory

2. Remove ClientApp/css directory

3. Create simple ClientApp/components/App.vue component:

<template>
    <div>
        <h1>Welcome Asp.Net Core + VueJS demo</h1>
        <p>
            The time is: {{time}}
        </p>
    </div>
</template>
<script>
export default {
    name: 'app',
    data() {
        return {
            time: new Date().toString()
        }
    }
}
</script>

5. Rename ClientApp/boot.ts to ClientApp/boot.js

6. Change conent of boot.js

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

const routes = [

];

new Vue({
    el: '#app-root',
    router: new VueRouter({ mode: 'history', routes: routes }),
    render: h => h(require('./components/App.vue'))
});

7. Try to run App

first time only: npm install

run command: dotnet run

and navigate to http://localhost:5000/

if all Ok: