Added module without TypeScript | Updated packages | Updated Readme

Author: danijelh

README.md

@@ -1,6 +1,6 @@
-# ASP.NET Core Vue.js with TypeScript template
+# ASP.NET Core 2.1 multi-page Vue.js with TypeScript template
 
-The repository contains template using Vue.js, Vuex, TypeScript and Bulma. It integrates Vue into AspNetCore MVC and showcases how to use Vue with .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, 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.
 
 ---
 
@@ -15,7 +15,11 @@ The repository contains template using Vue.js, Vuex, TypeScript and Bulma. It in
 
 ## Nuget
 
-- [Nuget package](https://www.nuget.org/packages/AspNetCore.Vue.TypeScript.Template)
+- [AspNetCore.Vue.TypeScript.Template](https://www.nuget.org/packages/AspNetCore.Vue.TypeScript.Template)
+
+| Version | Downloads |
+| :---: | :---: |
+| [![NuGet](https://img.shields.io/nuget/v/AspNetCore.Vue.TypeScript.Template.svg)](https://nuget.org/packages/AspNetCore.Vue.TypeScript.Template) | [![Nuget](https://img.shields.io/nuget/dt/AspNetCore.Vue.TypeScript.Template.svg)](https://nuget.org/packages/AspNetCore.Vue.TypeScript.Template) |
 
 ## Table of Contents
 
@@ -35,6 +39,7 @@ The repository contains template using Vue.js, Vuex, TypeScript and Bulma. It in
 - **TypeScript**
 - **Bulma**
 - **Sass**
+- **Jest**
 - **Webpack 4**
 
 ## Prerequisites
@@ -46,9 +51,9 @@ The repository contains template using Vue.js, Vuex, TypeScript and Bulma. It in
 
 In order to create a new project from this template, you must first install it.
 
-- Install the template from nuget by running the following command:
+Install the template from NuGet by running the following command:
 
-```console
+```
 dotnet new -i AspNetCore.Vue.TypeScript.Template
 ```
 
@@ -60,7 +65,7 @@ To create a new project run `dotnet new vuetypescript` command and provide the n
 
 Example
 
-```console
+```
 dotnet new vuetypescript --name TestProject.Web
 ```
 

aspnetcore-vue-typescript-template.nuspec

@@ -2,9 +2,9 @@
 <package xmlns="http://schemas.microsoft.com/packaging/2012/06/nuspec.xsd">
   <metadata>
     <id>AspNetCore.Vue.TypeScript.Template</id>
-    <version>0.1.0</version>
+    <version>0.2.0</version>
     <description>
-      Template integrating Vue.js with ASP.NET Core MVC application. Features Vue, Vuex, Vue router, Typescript, Bulma and Sass.
+      Template integrating Vue.js with ASP.NET Core MVC application. Features Vue, Vuex, Vue router, TypeScript, Bulma, Sass, Jest and Webpack 4.
     </description>
     <tags>template;vue;vuejs;typescript;vuex;</tags>
     <authors>Danijel Hrček</authors>
@@ -14,7 +14,7 @@
       <packageType name="Template" />
     </packageTypes>
     <requireLicenseAcceptance>false</requireLicenseAcceptance>
-    <releaseNotes>Initial release</releaseNotes>
+    <releaseNotes>0.2.0 release.</releaseNotes>
   </metadata>
   <files>
     <file

content/AspNetCore.VueJs/AspNetCore.VueJs.csproj

@@ -58,4 +58,10 @@
     <Folder Include="VueApp\__tests__\" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Content Update="Views\IDontLikeTypeScript\Index.cshtml">
+      <Pack>$(IncludeRazorContentInPack)</Pack>
+    </Content>
+  </ItemGroup>
+
 </Project>

content/AspNetCore.VueJs/Controllers/IDontNeedTypeScriptController.cs

@@ -0,0 +1,16 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace AspNetCore.VueJs.Controllers
+{
+    public class IDontNeedTypeScriptController : Controller
+    {
+        /// <summary>
+        /// SPA entry point
+        /// </summary>
+        /// <returns></returns>
+        public IActionResult Index()
+        {
+            return View();
+        }
+    }
+}

content/AspNetCore.VueJs/Startup.cs

@@ -1,5 +1,6 @@
 using Microsoft.AspNetCore.Builder;
 using Microsoft.AspNetCore.Hosting;
+using Microsoft.AspNetCore.Routing;
 using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.DependencyInjection;
 
@@ -17,7 +18,8 @@ public Startup(IConfiguration configuration)
         public void ConfigureServices(IServiceCollection services)
         {
             services.AddHttpClient();
-
+            
+            services.Configure<RouteOptions>(options => options.LowercaseUrls = true);
             services.AddMvc();
         }
 
@@ -33,11 +35,12 @@ public void Configure(IApplicationBuilder app, IHostingEnvironment env)
             app.UseMvc(routes =>
             {
                 routes.MapRoute(
-                    name: "default",
-                    template: "{controller=Template}/{action=Index}/{id?}");
-
+                    name: "spa-route",
+                    template: "{controller}/{*anything=Index}",
+                    defaults: new { action = "Index" });
+                
                 routes.MapRoute(
-                   name: "spa-fallback",
+                   name: "app-fallback",
                    template: "{*anything}/",
                    defaults: new { controller = "Template", action = "Index" });
             });

content/AspNetCore.VueJs/Views/IDontNeedTypeScript/Index.cshtml

@@ -0,0 +1,16 @@
+
+@{
+    ViewData["Title"] = "Index";
+}
+
+@section scripts{
+
+    <environment names="Development,Production,Staging">
+        <script src="~/dist/js/idontneedtypescript/bundle.js" asp-append-version="true"></script>
+    </environment>
+
+}
+
+<div id="app">
+
+</div>

content/AspNetCore.VueJs/Views/IceAndFire/Index.cshtml

@@ -1,13 +1,9 @@
 @{
-    ViewData["Title"] = "Home Page";
+    ViewData["Title"] = "Ice and fire";
 }
 
 @section styles{
 
-    <environment names="Development,Production,Staging">
-        @*<link rel="stylesheet" href="~/dist/css//main.css" asp-append-version="true" />*@
-    </environment>
-
 }
 
 @section scripts{

content/AspNetCore.VueJs/Views/Shared/_Navigation.cshtml

@@ -17,6 +17,8 @@
             <div class="navbar-start">
                 <a asp-controller="Template"
                    asp-action="Index" class="navbar-item">Template</a>
+                <a asp-controller="IDontNeedTypeScript"
+                   asp-action="Index" class="navbar-item">No TypeScript</a>
                 <a asp-controller="IceAndFire"
                    asp-action="Index" class="navbar-item">Api of Ice and fire</a>
             </div>

content/AspNetCore.VueJs/Views/Template/Index.cshtml

@@ -1,5 +1,5 @@
 @{
-    ViewData["Title"] = "Home Page";
+    ViewData["Title"] = "Template";
 }
 
 @section styles{

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

@@ -3,14 +3,16 @@ import VueRouter from 'vue-router'
 // Pages
 import Characters from '@/iceandfire/views/Characters.vue'
 
+const routePrefix = 'iceandfire'
+
 const routes = [
 	{
 		path: '*',
 		component: Characters
 	},
 	{
 		name: 'characters',
-		path: '/',
+		path: `/${routePrefix}`,
 		component: Characters
 	}
 ]

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

@@ -0,0 +1,58 @@
+<template>
+    <div>
+
+        <div class="container">
+            <div class="columns">
+                <div class="column is-3">
+                    <section class="section">
+                        <aside class="menu">
+                            <p class="menu-label">
+                                Examples
+                            </p>
+                            <ul class="menu-list">
+                                <li>
+                                    <router-link :to="{ name: 'counter' }">Counter</router-link>
+                                </li>
+                            </ul>
+                            <p class="menu-label">
+                                About
+                            </p>
+                            <ul class="menu-list">
+                                <li>
+                                    <router-link :to="{ name: 'moduleinfo' }">Module info</router-link>
+                                </li>
+                            </ul>
+                        </aside>
+                    </section>
+                </div>
+                <div class="column is-9">
+
+                    <section class="section">
+                        <transition name="component-fade"
+                                    mode="out-in">
+                            <router-view></router-view>
+                        </transition>
+                    </section>
+
+                </div>
+            </div>
+        </div>
+        <notifications group="global" />
+       
+    </div> 
+
+</template>
+
+<script>
+import Vue from 'vue'
+import Notifications from 'vue-notification'
+
+Vue.use(Notifications)
+
+export default {
+  name: 'App'
+}
+</script>
+
+<style scoped>
+</style>

content/AspNetCore.VueJs/VueApp/idontneedtypescript/app.js

@@ -0,0 +1,17 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+Vue.config.performance = true
+
+Vue.use(VueRouter)
+
+import store from './store/store'
+import { router } from './router/router'
+
+import App from './App.vue'
+
+new Vue({
+    store,
+    router,
+    render: h => h(App)
+}).$mount('#app')

content/AspNetCore.VueJs/VueApp/idontneedtypescript/router/router.js

@@ -0,0 +1,30 @@
+import VueRouter from 'vue-router'
+
+// Pages
+import Counter from '@/idontneedtypescript/views/Counter'
+import ModuleInfo from '@/idontneedtypescript/views/ModuleInfo'
+
+const routePrefix = 'idontneedtypescript'
+
+const routes = [
+	{
+		path: '*',
+		redirect: { name: 'moduleinfo' }
+	},
+	{
+		name: 'moduleinfo',
+		path: `/${routePrefix}/info`,
+		component: ModuleInfo
+	},
+	{
+		name: 'counter',
+		path: `/${routePrefix}/counter`,
+		component: Counter
+	}
+]
+
+export const router = new VueRouter({
+	mode: 'history',
+	routes,
+	linkActiveClass: 'is-active'
+})

content/AspNetCore.VueJs/VueApp/idontneedtypescript/store/modules/counter-module.js

@@ -0,0 +1,33 @@
+const state = {
+    count: 0
+}
+
+const getters = {
+    count(state) {
+        return state.count
+    }
+}
+
+const mutations = {
+    SET_COUNT(state, value) {
+        state.count = value
+    }
+}
+
+const actions = {
+    increaseCount({ commit, getters }) {
+        commit('SET_COUNT', getters.count + 1)
+    },
+
+    resetCount({ commit }) {
+        commit('SET_COUNT', 0)
+    }
+}
+
+export default {
+    namespaced: true,
+    state,
+    mutations,
+    actions,
+    getters
+}

content/AspNetCore.VueJs/VueApp/idontneedtypescript/store/store.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import counterModule from './modules/counter-module'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+    state: {
+        version: '1.0.0'
+    },
+    modules: {
+        counterModule: counterModule
+    }
+})