.NET Core 3 | Packages and setup update

README.md

@@ -1,6 +1,6 @@
-# ASP.NET Core 2.2 multi-page Vue.js with TypeScript template
+# ASP.NET Core 3.1 multi-page Vue.js with TypeScript template
 
-The repository contains template using Vue.js, Vuex, Vue router, TypeScript, Bulma, SASS and Jest. It integrates Vue into AspNetCore MVC and showcases how to use Vue with it's entire ecosystem in .NET as a multipage (multiple mini SPA's) application. The template can also be used as a complete single page application but you should consider using [Vue cli](https://cli.vuejs.org/) for this as it is a more flexible and advanced solution.
+The repository contains template using Vue.js, Vuex, Vue router, TypeScript, Bulma and SASS. It integrates Vue into AspNetCore MVC and showcases how to use Vue with it's entire ecosystem in .NET as a multipage (multiple mini SPA's) application. The template can also be used as a complete single page application but you should consider using [Vue cli](https://cli.vuejs.org/) for this as it is a more flexible and advanced solution.
 
 > **No TypeScript**: Template completely supports usage without TypeScript. You can use plain js if you don't have the need for or don't want to use TypeScript.
 
@@ -35,18 +35,17 @@ The repository contains template using Vue.js, Vuex, Vue router, TypeScript, Bul
 
 ## Features
 
-- **ASP NET Core 2.2**
+- **ASP NET Core 3.1**
 - **Vue.js**
 - **Vuex**
 - **TypeScript**
 - **Bulma**
 - **Sass**
-- **Jest**
 - **Webpack 4**
 
 ## Prerequisites
 
-- [.Net Core 2.2 SDK](https://www.microsoft.com/net/download/windows)
+- [.Net Core 3.1 SDK](https://dotnet.microsoft.com/download/dotnet-core)
 - [NodeJS](https://nodejs.org/)
 
 ## Installation
@@ -84,7 +83,7 @@ Template features the following commands
 - `npm run dev` - Builds front end in development mode and watches for any changes made to the files.
 - `npm run build:dev` - Builds front end in development mode.
 - `npm run build:prod` - Builds front end in production mode.
-- `npm run test` - Runs tests under __tests__ folder and generates code coverage report.
+- `npm run test` - ~~Runs tests under __tests__ folder and generates code coverage report.~~ Tests are removed to make config and packages simple.
 - `npm run publish` - Builds production optimized front-end packages and publishes the application in release mode.
 
 ## Licence

aspnetcore-vue-typescript-template.nuspec

@@ -2,19 +2,18 @@
 <package xmlns="http://schemas.microsoft.com/packaging/2012/06/nuspec.xsd">
   <metadata>
     <id>AspNetCore.Vue.TypeScript.Template</id>
-    <version>1.0.1</version>
+    <version>2.0.0</version>
     <description>
-      Template integrating Vue.js with ASP.NET Core MVC application. Features Vue, Vuex, Vue router, TypeScript, Bulma, Sass, Jest and Webpack 4.
+      Template integrating Vue.js with ASP.NET Core MVC application. Features Vue, Vuex, Vue router, TypeScript, Bulma, Sass and Webpack 4.
     </description>
     <tags>template;vue;vuejs;typescript;vuex;</tags>
     <authors>Danijel Hrček</authors>
     <projectUrl>https://github.com/danijelh/aspnetcore-vue-typescript-template</projectUrl>
-    <licenseUrl>https://github.com/danijelh/aspnetcore-vue-typescript-template/blob/master/LICENCE.txt</licenseUrl>
     <packageTypes>
       <packageType name="Template" />
     </packageTypes>
     <requireLicenseAcceptance>false</requireLicenseAcceptance>
-    <releaseNotes>1.0.1 release.</releaseNotes>
+    <releaseNotes>2.0.0 release.Upgrade to NET Core 3.x</releaseNotes>
   </metadata>
   <files>
     <file

content/AspNetCore.VueJs/.babelrc

@@ -1,19 +1,13 @@
 {
-    "presets": [
-      ["env", {
-        "modules": false,
-        "targets": {
-          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
-        }
-      }],
-      "stage-2"
-    ],
-    "plugins": ["transform-runtime", "transform-es2015-modules-commonjs"],
-    "env": {
-      "test": {
-        "presets": [
-          ["env", { "targets": { "node": "current" }}]
-        ]
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
       }
-    }
-  }
+    ]
+  ],
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import"
+  ]
+}

content/AspNetCore.VueJs/AspNetCore.VueJs.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
-    <TargetFramework>netcoreapp2.2</TargetFramework>
+    <TargetFramework>netcoreapp3.1</TargetFramework>
     <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
     <TypeScriptToolsVersion>2.8</TypeScriptToolsVersion>
   </PropertyGroup>
@@ -14,7 +14,6 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.All" Version="2.2.1" />
     <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="2.2.1" />
   </ItemGroup>
 

content/AspNetCore.VueJs/Startup.cs

@@ -3,6 +3,7 @@
 using Microsoft.AspNetCore.Routing;
 using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Hosting;
 
 namespace AspNetCore.VueJs
 {
@@ -23,7 +24,7 @@ public void ConfigureServices(IServiceCollection services)
             services.AddMvc();
         }
 
-        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
+        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
         {
             if (env.IsDevelopment())
             {
@@ -32,16 +33,18 @@ public void Configure(IApplicationBuilder app, IHostingEnvironment env)
 
             app.UseStaticFiles();
 
-            app.UseMvc(routes =>
+            app.UseRouting();
+
+            app.UseEndpoints(endpoints =>
             {
-                routes.MapRoute(
+                endpoints.MapControllerRoute(
                     name: "spa-route",
-                    template: "{controller}/{*anything=Index}",
+                    pattern: "{controller}/{*anything=Index}",
                     defaults: new { action = "Index" });
-                
-                routes.MapRoute(
+
+                endpoints.MapControllerRoute(
                    name: "app-fallback",
-                   template: "{*anything}/",
+                   pattern: "{*anything}/",
                    defaults: new { controller = "Template", action = "Index" });
             });
         }

content/AspNetCore.VueJs/VueApp/iceandfire/store/store.ts

@@ -1,10 +1,13 @@
+import 'es6-promise/auto'
+
 import Vue from 'vue'
 import Vuex, { StoreOptions } from 'vuex'
 import { GetterTree } from 'vuex'
 import { ActionTree } from 'vuex'
 import { MutationTree } from 'vuex'
 import { RootState } from './state'
-import { CharacterResponse } from '@/iceandfire/types/models/character'
+// import { CharacterResponse } from '@/iceandfire/types/models/character'
+import { CharacterResponse } from '../types/models/character'
 
 import axios from 'axios'
 

content/AspNetCore.VueJs/VueApp/idontneedtypescript/views/ModuleInfo.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="container">
             <h1 class="title">
-                {{ pageTile }}
+                {{ pageTitle }}
             </h1>
             <h2 class="subtitle">
                 And that's fine, don't use it.
@@ -39,7 +39,7 @@
     export default {
         data() {
             return {
-                pageTile: 'I don\'t need TypeScript'
+                pageTitle: 'I don\'t need TypeScript'
             }
         }
     }

content/AspNetCore.VueJs/VueApp/template/App.vue

@@ -25,6 +25,9 @@
                                 <li>
                                     <router-link :to="{ name: 'templateInfo' }">Template</router-link>
                                 </li>
+                                <li>
+                                    <router-link :to="{ name: 'compositionApi' }">Composition API</router-link>
+                                </li>
                             </ul>
                         </aside>
                     </section>

content/AspNetCore.VueJs/VueApp/template/app.ts

@@ -1,9 +1,11 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
+import VueCompositionAPI from '@vue/composition-api'
 
 Vue.config.performance = true
 
 Vue.use(VueRouter)
+Vue.use(VueCompositionAPI)
 
 import store from './store/store'
 import { router } from './router/router'

content/AspNetCore.VueJs/VueApp/template/router/router.ts

@@ -4,6 +4,7 @@ import VueRouter from 'vue-router'
 import Vuex from '@/template/views/Vuex.vue'
 import TemplateInfo from '@/template/views/TemplateInfo.vue'
 import ThirdPartyLibraries from '@/template/views/ThirdPartyLibraries.vue'
+import CompositionApi from '@/template/views/CompositionApi.vue'
 
 const routePrefix = 'template'
 
@@ -17,6 +18,11 @@ const routes = [
 		path: `/${routePrefix}/info`,
 		component: TemplateInfo
 	},
+	{
+		name: 'compositionApi',
+		path: `/${routePrefix}/compositionApi`,
+		component: CompositionApi
+	},
 	{
 		name: 'vuex',
 		path: `/${routePrefix}/vuex`,

content/AspNetCore.VueJs/VueApp/template/views/CompositionApi.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <div class="container">
+      <h1 class="title">
+        {{ pageTitle }}
+      </h1>
+      <h2 class="subtitle">Using Vue 3 composition API in Vue 2.</h2>
+      <div class="content">
+        <p>
+          Vue 3 recently reached stable release. However I wouldn't yet
+          recommend it for a production use as libraries and other dependencies
+          still need to reach stability.
+        </p>
+        <p>
+          This component showcases how you can use Vue 3 composition API with
+          Vue 2.
+        </p>
+        <a
+          @click.prevent.stop="changeTitle"
+          class="button is-primary is-small shadow"
+        >
+          Change title
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+// Using Vue 3 composition API with Vue 2
+import { ref, defineComponent } from "@vue/composition-api";
+
+export default defineComponent({
+  setup() {
+    let pageTitle = ref("Composition API");
+
+    function changeTitle() {
+      pageTitle.value = "Composition API is awesome!";
+    }
+
+    return {
+      pageTitle,
+      changeTitle,
+    };
+  },
+});
+</script>
+
+<style scoped>
+</style>