├── global.json
├── Views
    ├── _ViewStart.cshtml
    ├── _ViewImports.cshtml
    ├── Shared
    │   ├── Error.cshtml
    │   └── _Layout.cshtml
    └── Home
    │   └── Index.cshtml
├── wwwroot
    └── favicon.ico
├── appsettings.json
├── ClientApp
    ├── components
    │   ├── app
    │   │   ├── app.ts
    │   │   └── app.vue.html
    │   ├── counter
    │   │   ├── counter.ts
    │   │   └── counter.vue.html
    │   ├── fetchdata
    │   │   ├── fetchdata.ts
    │   │   └── fetchdata.vue.html
    │   ├── todos
    │   │   ├── todos.vue.html
    │   │   └── todos.ts
    │   ├── home
    │   │   └── home.vue.html
    │   └── navmenu
    │   │   ├── navmenu.css
    │   │   └── navmenu.vue.html
    └── boot.ts
├── Models
    ├── Todo.cs
    └── WeatherForecast.cs
├── tsconfig.json
├── .vscode
    ├── tasks.json
    └── launch.json
├── Controllers
    ├── HomeController.cs
    ├── SampleDataController.cs
    └── TodoController.cs
├── web.config
├── Program.cs
├── package.json
├── AspCoreVue.csproj
├── webpack.config.vendor.js
├── webpack.config.js
├── Startup.cs
└── .gitignore


/global.json:
--------------------------------------------------------------------------------
1 | {
2 |   "sdk": { "version": "1.0.3" }
3 | }
4 | 


--------------------------------------------------------------------------------
/Views/_ViewStart.cshtml:
--------------------------------------------------------------------------------
1 | @{
2 |     Layout = "_Layout";
3 | }
4 | 


--------------------------------------------------------------------------------
/wwwroot/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DaniJG/AspCoreVue/HEAD/wwwroot/favicon.ico


--------------------------------------------------------------------------------
/Views/_ViewImports.cshtml:
--------------------------------------------------------------------------------
1 | @using AspCoreVue
2 | @addTagHelper "*, Microsoft.AspNetCore.Mvc.TagHelpers"
3 | @addTagHelper "*, Microsoft.AspNetCore.SpaServices"
4 | 


--------------------------------------------------------------------------------
/Views/Shared/Error.cshtml:
--------------------------------------------------------------------------------
1 | @{
2 |     ViewData["Title"] = "Error";
3 | }
4 | 
5 | <h1 class="text-danger">Error.</h1>
6 | <h2 class="text-danger">An error occurred while processing your request.</h2>
7 | 


--------------------------------------------------------------------------------
/appsettings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "Logging": {
 3 |     "IncludeScopes": false,
 4 |     "LogLevel": {
 5 |       "Default": "Debug",
 6 |       "System": "Information",
 7 |       "Microsoft": "Information"
 8 |     }
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/Views/Home/Index.cshtml:
--------------------------------------------------------------------------------
 1 | @{
 2 |     ViewData["Title"] = "Home Page";
 3 | }
 4 | 
 5 | <div id='app-root'>Loading...</div>
 6 | 
 7 | @section scripts {
 8 |     <script src="~/dist/main.js" asp-append-version="true"></script>
 9 | }
10 | 


--------------------------------------------------------------------------------
/ClientApp/components/app/app.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import { Component } from 'vue-property-decorator';
 3 | 
 4 | @Component({
 5 |     components: {
 6 |         MenuComponent: require('../navmenu/navmenu.vue.html')
 7 |     }
 8 | })
 9 | export default class AppComponent extends Vue {
10 | }
11 | 


--------------------------------------------------------------------------------
/ClientApp/components/counter/counter.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import { Component } from 'vue-property-decorator';
 3 | 
 4 | @Component
 5 | export default class CounterComponent extends Vue {
 6 |     currentcount: number = 0;
 7 | 
 8 |     incrementCounter() {
 9 |         this.currentcount++;
10 |     }
11 | }
12 | 


--------------------------------------------------------------------------------
/Models/Todo.cs:
--------------------------------------------------------------------------------
 1 | using System;
 2 | using System.Collections.Generic;
 3 | using System.Linq;
 4 | using System.Threading.Tasks;
 5 | 
 6 | namespace ASPCoreVue.Models
 7 | {
 8 |     public class Todo
 9 |     {
10 |         public Guid Id { get; set; }
11 |         public string Description { get; set; }
12 |         public bool Done { get; set; }
13 |     }
14 | }
15 | 


--------------------------------------------------------------------------------
/ClientApp/components/counter/counter.vue.html:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <h1>Counter</h1>
 4 | 
 5 |         <p>This is a simple example of a Vue.js component.</p>
 6 | 
 7 |         <p>Current count: <strong>{{ currentcount }}</strong></p>
 8 | 
 9 |         <button @click="incrementCounter">Increment</button>
10 |     </div>
11 | </template>
12 | 
13 | <script src="./counter.ts"></script>
14 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowSyntheticDefaultImports": true,
 4 |     "experimentalDecorators": true,
 5 |     "module": "es2015",
 6 |     "moduleResolution": "node",
 7 |     "target": "es5",
 8 |     "sourceMap": true,
 9 |     "skipDefaultLibCheck": true,
10 |     "types": ["requirejs"]
11 |   },
12 |   "exclude": [
13 |       "bin",
14 |       "node_modules"
15 |   ]
16 | }
17 | 


--------------------------------------------------------------------------------
/ClientApp/components/app/app.vue.html:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div id='app-root' class="container-fluid">
 3 |         <div class="row">
 4 |             <div class="col-sm-3">
 5 |                 <menu-component />
 6 |             </div>
 7 |             <div class="col-sm-9">
 8 |                 <router-view></router-view>
 9 |             </div>
10 |         </div>
11 |     </div>
12 | </template>
13 | 
14 | <script src="./app.ts"></script>
15 | 


--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     // See https://go.microsoft.com/fwlink/?LinkId=733558
 3 |     // for the documentation about the tasks.json format
 4 |     "version": "0.1.0",
 5 |     "command": "dotnet",
 6 |     "isShellCommand": true,
 7 |     "args": [],
 8 |     "tasks": [
 9 |         {
10 |             "taskName": "build",
11 |             "args": [ ],
12 |             "isBuildCommand": true,
13 |             "showOutput": "silent",
14 |             "problemMatcher": "$msCompile"
15 |         }
16 |     ]
17 | }


--------------------------------------------------------------------------------
/Controllers/HomeController.cs:
--------------------------------------------------------------------------------
 1 | using System;
 2 | using System.Collections.Generic;
 3 | using System.Linq;
 4 | using System.Threading.Tasks;
 5 | using Microsoft.AspNetCore.Mvc;
 6 | 
 7 | namespace AspCoreVue.Controllers
 8 | {
 9 |     public class HomeController : Controller
10 |     {
11 |         public IActionResult Index()
12 |         {
13 |             return View();
14 |         }
15 | 
16 |         public IActionResult Error()
17 |         {
18 |             return View();
19 |         }
20 |     }
21 | }
22 | 


--------------------------------------------------------------------------------
/Views/Shared/_Layout.cshtml:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <meta charset="utf-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>@ViewData["Title"] - AspCoreVue</title>
 7 | 
 8 |         <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
 9 |     </head>
10 |     <body>
11 |         @RenderBody()
12 | 
13 |         <script src="~/dist/vendor.js" asp-append-version="true"></script>
14 |         @RenderSection("scripts", required: false)
15 |     </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/Models/WeatherForecast.cs:
--------------------------------------------------------------------------------
 1 | using System;
 2 | using System.Collections.Generic;
 3 | using System.Linq;
 4 | using System.Threading.Tasks;
 5 | 
 6 | namespace ASPCoreVue.Models
 7 | {
 8 |     public class WeatherForecast
 9 |     {
10 |         public string DateFormatted { get; set; }
11 |         public int TemperatureC { get; set; }
12 |         public string Summary { get; set; }
13 | 
14 |         public int TemperatureF
15 |         {
16 |             get
17 |             {
18 |                 return 32 + (int)(TemperatureC / 0.5556);
19 |             }
20 |         }
21 |     }
22 | }
23 | 


--------------------------------------------------------------------------------
/web.config:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <configuration>
 3 | 
 4 |   <!--
 5 |     Configure your application settings in appsettings.json. Learn more at https://go.microsoft.com/fwlink/?LinkId=786380
 6 |   -->
 7 | 
 8 |   <system.webServer>
 9 |     <handlers>
10 |       <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModule" resourceType="Unspecified"/>
11 |     </handlers>
12 |     <aspNetCore processPath="%LAUNCHER_PATH%" arguments="%LAUNCHER_ARGS%" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" forwardWindowsAuthToken="false"/>
13 |   </system.webServer>
14 | </configuration>
15 | 


--------------------------------------------------------------------------------
/Program.cs:
--------------------------------------------------------------------------------
 1 | using System;
 2 | using System.Collections.Generic;
 3 | using System.IO;
 4 | using System.Linq;
 5 | using System.Threading.Tasks;
 6 | using Microsoft.AspNetCore.Hosting;
 7 | 
 8 | namespace AspCoreVue
 9 | {
10 |     public class Program
11 |     {
12 |         public static void Main(string[] args)
13 |         {
14 |             var host = new WebHostBuilder()
15 |                 .UseKestrel()
16 |                 .UseContentRoot(Directory.GetCurrentDirectory())
17 |                 .UseIISIntegration()
18 |                 .UseStartup<Startup>()
19 |                 .Build();
20 | 
21 |             host.Run();
22 |         }
23 |     }
24 | }
25 | 


--------------------------------------------------------------------------------
/ClientApp/components/fetchdata/fetchdata.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import { Component } from 'vue-property-decorator';
 3 | 
 4 | interface WeatherForecast {
 5 |     dateFormatted: string;
 6 |     temperatureC: number;
 7 |     temperatureF: number;
 8 |     summary: string;
 9 | }
10 | 
11 | @Component
12 | export default class FetchDataComponent extends Vue {
13 |     forecasts: WeatherForecast[] = [];
14 | 
15 |     mounted() {
16 |         fetch('/api/SampleData/WeatherForecasts')
17 |             .then(response => response.json() as Promise<WeatherForecast[]>)
18 |             .then(data => {
19 |                 this.forecasts = data;
20 |             });
21 |     }
22 | }
23 | 


--------------------------------------------------------------------------------
/ClientApp/boot.ts:
--------------------------------------------------------------------------------
 1 | import 'bootstrap';
 2 | import Vue from 'vue';
 3 | import VueRouter from 'vue-router';
 4 | Vue.use(VueRouter);
 5 | 
 6 | const routes = [
 7 |     { path: '/', component: require('./components/home/home.vue.html') },
 8 |     { path: '/counter', component: require('./components/counter/counter.vue.html') },
 9 |     { path: '/fetchdata', component: require('./components/fetchdata/fetchdata.vue.html') },
10 |     { path: '/todos', component: require('./components/todos/todos.vue.html') }
11 | ];
12 | 
13 | new Vue({
14 |     el: '#app-root',
15 |     router: new VueRouter({ mode: 'history', routes: routes }),
16 |     render: h => h(require('./components/app/app.vue.html'))
17 | });
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "AspCoreVue",
 3 |   "version": "0.0.0",
 4 |   "devDependencies": {
 5 |     "@types/requirejs": "^2.1.28",
 6 |     "aspnet-webpack": "^1.0.27",
 7 |     "awesome-typescript-loader": "^3.0.0",
 8 |     "bootstrap": "^3.3.6",
 9 |     "css-loader": "^0.25.0",
10 |     "event-source-polyfill": "^0.0.7",
11 |     "extract-text-webpack-plugin": "^2.0.0-rc",
12 |     "file-loader": "^0.9.0",
13 |     "isomorphic-fetch": "^2.2.1",
14 |     "jquery": "^3.1.1",
15 |     "style-loader": "^0.13.1",
16 |     "typescript": "^2.2.1",
17 |     "url-loader": "^0.5.7",
18 |     "vue": "^2.2.2",
19 |     "vue-loader": "^11.1.4",
20 |     "vue-property-decorator": "^5.0.1",
21 |     "vue-router": "^2.3.0",
22 |     "vue-template-compiler": "^2.2.2",
23 |     "webpack": "^2.2.0",
24 |     "webpack-hot-middleware": "^2.12.2"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/ClientApp/components/todos/todos.vue.html:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <h1>Things I need to do</h1>
 4 | 
 5 |         <ul v-if="todos.length">
 6 |             <li v-for="item in todos">
 7 |                 {{item.description}} - <button v-on:click="completeItem(item)" class="btn btn-link">completed</button>
 8 |             </li>
 9 |         </ul>
10 |         <p v-else class="text-success">Nothing to do right now!</p>
11 | 
12 |         <form>
13 |             <div class="row">
14 |                 <div class="col-xs-6">
15 |                     <input v-model="newItemDescription" class="form-control" placeholder="I just remembered that I have to...">
16 |                 </div>
17 |             <button v-on:click="addItem($event)" class="btn btn-primary">Add</button>
18 |             </div>
19 |         </form>
20 |     </div>
21 | </template>
22 | 
23 | <script src="./todos.ts"></script>
24 | 


--------------------------------------------------------------------------------
/ClientApp/components/fetchdata/fetchdata.vue.html:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <h1>Weather forecast</h1>
 4 | 
 5 |         <p>This component demonstrates fetching data from the server.</p>
 6 | 
 7 |         <table v-if="forecasts.length" class="table">
 8 |             <thead>
 9 |                 <tr>
10 |                     <th>Date</th>
11 |                     <th>Temp. (C)</th>
12 |                     <th>Temp. (F)</th>
13 |                     <th>Summary</th>
14 |                 </tr>
15 |             </thead>
16 |             <tbody>
17 |                 <tr v-for="item in forecasts">
18 |                     <td>{{ item.dateFormatted }}</td>
19 |                     <td>{{ item.temperatureC }}</td>
20 |                     <td>{{ item.temperatureF }}</td>
21 |                     <td>{{ item.summary }}</td>
22 |                 </tr>
23 |             </tbody>
24 |         </table>
25 | 
26 |         <p v-else><em>Loading...</em></p>
27 |     </div>
28 | </template>
29 | 
30 | <script src="./fetchdata.ts"></script>
31 | 


--------------------------------------------------------------------------------
/Controllers/SampleDataController.cs:
--------------------------------------------------------------------------------
 1 | using System;
 2 | using System.Collections.Generic;
 3 | using System.Linq;
 4 | using System.Threading.Tasks;
 5 | using Microsoft.AspNetCore.Mvc;
 6 | using ASPCoreVue.Models;
 7 | 
 8 | namespace AspCoreVue.Controllers
 9 | {
10 |     [Route("api/[controller]")]
11 |     public class SampleDataController : Controller
12 |     {
13 |         private static string[] Summaries = new[]
14 |         {
15 |             "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
16 |         };
17 | 
18 |         [HttpGet("[action]")]
19 |         public IEnumerable<WeatherForecast> WeatherForecasts()
20 |         {
21 |             var rng = new Random();
22 |             return Enumerable.Range(1, 5).Select(index => new WeatherForecast
23 |             {
24 |                 DateFormatted = DateTime.Now.AddDays(index).ToString("d"),
25 |                 TemperatureC = rng.Next(-20, 55),
26 |                 Summary = Summaries[rng.Next(Summaries.Length)]
27 |             });
28 |         }
29 | 
30 |         
31 |     }
32 | }
33 | 


--------------------------------------------------------------------------------
/Controllers/TodoController.cs:
--------------------------------------------------------------------------------
 1 | using System;
 2 | using System.Collections.Generic;
 3 | using System.Collections.Concurrent;
 4 | using System.Linq;
 5 | using System.Threading.Tasks;
 6 | using Microsoft.AspNetCore.Mvc;
 7 | using ASPCoreVue.Models;
 8 | 
 9 | namespace AspCoreVue.Controllers
10 | {
11 |     [Route("api/[controller]")]
12 |     public class TodoController : Controller
13 |     {
14 |         private static ConcurrentBag<Todo> todos = new ConcurrentBag<Todo> {
15 |             new Todo { Id = Guid.NewGuid(), Description = "Learn Vue" }
16 |         };
17 | 
18 |         [HttpGet()]
19 |         public IEnumerable<Todo> GetTodos()
20 |         {
21 |             return todos.Where(t => !t.Done);
22 |         }
23 | 
24 |         [HttpPost()]
25 |         public Todo AddTodo([FromBody]Todo todo)
26 |         {
27 |             todo.Id = Guid.NewGuid();
28 |             todo.Done = false;
29 |             todos.Add(todo);
30 |             return todo;
31 |         }
32 | 
33 |         [HttpDelete("{id}")]
34 |         public ActionResult CompleteTodo(Guid id)
35 |         {
36 |             var todo = todos.SingleOrDefault(t => t.Id == id);
37 |             if (todo == null) return NotFound();
38 | 
39 |             todo.Done = true;
40 |             return StatusCode(204);
41 |         }
42 |     }
43 | }
44 | 


--------------------------------------------------------------------------------
/AspCoreVue.csproj:
--------------------------------------------------------------------------------
 1 | <Project ToolsVersion="15.0" Sdk="Microsoft.NET.Sdk.Web">
 2 |   <PropertyGroup>
 3 |     <TargetFramework>netcoreapp1.1</TargetFramework>
 4 |     <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
 5 |     <IsPackable>false</IsPackable>
 6 |   </PropertyGroup>
 7 |   <ItemGroup>
 8 |     <PackageReference Include="Microsoft.AspNetCore" Version="1.1.0" />
 9 |     <PackageReference Include="Microsoft.AspNetCore.Mvc" Version="1.1.1" />
10 |     <PackageReference Include="Microsoft.AspNetCore.SpaServices" Version="1.1.1" />
11 |     <PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="1.1.0" />
12 |     <PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="1.1.0" />
13 |   </ItemGroup>
14 |   <ItemGroup>
15 |     <!-- Files not to show in IDE -->
16 |     <None Remove="yarn.lock" />
17 |   </ItemGroup>
18 |   <Target Name="RunWebpack" AfterTargets="ComputeFilesToPublish">
19 |     <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
20 |     <Exec Command="npm install" />
21 |     <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod" />
22 |     <Exec Command="node node_modules/webpack/bin/webpack.js --env.prod" />
23 | 
24 |     <!-- Include the newly-built files in the publish output -->
25 |     <ItemGroup>
26 |       <DistFiles Include="wwwroot\dist\**" />
27 |       <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
28 |         <RelativePath>%(DistFiles.Identity)</RelativePath>
29 |         <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
30 |       </ResolvedFileToPublish>
31 |     </ItemGroup>
32 |   </Target>
33 | </Project>


--------------------------------------------------------------------------------
/ClientApp/components/home/home.vue.html:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <h1>Hello, world!</h1>
 4 |         <p>Welcome to your new single-page application, built with:</p>
 5 |         <ul>
 6 |             <li><a href="https://get.asp.net/">ASP.NET Core</a> and <a href="https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx">C#</a> for cross-platform server-side code</li>
 7 |             <li><a href="https://vuejs.org/">Vue.js</a> and <a href="http://www.typescriptlang.org/">TypeScript</a> for client-side code</li>
 8 |             <li><a href="https://webpack.github.io/">Webpack</a> for building and bundling client-side resources</li>
 9 |             <li><a href="http://getbootstrap.com/">Bootstrap</a> for layout and styling</li>
10 |         </ul>
11 |         <p>To help you get started, we've also set up:</p>
12 |         <ul>
13 |             <li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
14 |             <li><strong>Webpack dev middleware</strong>. In development mode, there's no need to run the <code>webpack</code> build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.</li>
15 |             <li><strong>Hot module replacement</strong>. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, your Vue app will be rebuilt and a new instance injected is into the page.</li>
16 |             <li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and the <code>webpack</code> build tool produces minified static CSS and JavaScript files.</li>
17 |         </ul>
18 |     </div>
19 | </template>


--------------------------------------------------------------------------------
/ClientApp/components/todos/todos.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import { Component } from 'vue-property-decorator';
 3 | 
 4 | interface TodoItem {
 5 |     description: string;
 6 |     done: boolean;
 7 |     id: string;
 8 | }
 9 | 
10 | @Component
11 | export default class TodoComponent extends Vue {
12 |     todos: TodoItem[];
13 |     newItemDescription: string;
14 | 
15 |     data() {
16 |         return {
17 |             todos: [],
18 |             newItemDescription: null
19 |         };
20 |     } 
21 | 
22 |     mounted() {
23 |         fetch('/api/todo')
24 |             .then(response => response.json() as Promise<TodoItem[]>)
25 |             .then(data => {
26 |                 this.todos = data;
27 |             });
28 |     }
29 | 
30 |     addItem(event){
31 |         if(event) event.preventDefault();
32 |         
33 |         fetch('/api/todo', {
34 |           method: 'post',
35 |           body: JSON.stringify(<TodoItem>{description: this.newItemDescription}),
36 |           headers: new Headers({
37 |             'Accept': 'application/json',
38 |             'Content-Type': 'application/json'
39 |           })
40 |         })
41 |         .then(response => response.json() as Promise<TodoItem>)
42 |         .then((newItem) => {
43 |             this.todos.push(newItem);
44 |             this.newItemDescription = null;
45 |         });
46 |     }
47 | 
48 |     completeItem(item: TodoItem){
49 |         fetch(`/api/todo/${item.id}`, {
50 |           method: 'delete',
51 |           headers: new Headers({
52 |             'Accept': 'application/json',
53 |             'Content-Type': 'application/json'
54 |           })
55 |         })
56 |         .then(() => {
57 |             this.todos = this.todos.filter((t) => t.id !== item.id);
58 |         });
59 |     }
60 | }
61 | 


--------------------------------------------------------------------------------
/ClientApp/components/navmenu/navmenu.css:
--------------------------------------------------------------------------------
 1 | .main-nav li .glyphicon {
 2 |     margin-right: 10px;
 3 | }
 4 | 
 5 | /* Highlighting rules for nav menu items */
 6 | .main-nav li a.router-link-active,
 7 | .main-nav li a.router-link-active:hover,
 8 | .main-nav li a.router-link-active:focus {
 9 |     background-color: #4189C7;
10 |     color: white;
11 | }
12 | 
13 | /* Keep the nav menu independent of scrolling and on top of other items */
14 | .main-nav {
15 |     position: fixed;
16 |     top: 0;
17 |     left: 0;
18 |     right: 0;
19 |     z-index: 1;
20 | }
21 | 
22 | @media (max-width: 767px) {
23 |     /* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
24 |     body {
25 |         padding-top: 50px;
26 |     }
27 | }
28 | 
29 | @media (min-width: 768px) {
30 |     /* On small screens, convert the nav menu to a vertical sidebar */
31 |     .main-nav {
32 |         height: 100%;
33 |         width: calc(25% - 20px);
34 |     }
35 |     .main-nav .navbar {
36 |         border-radius: 0px;
37 |         border-width: 0px;
38 |         height: 100%;
39 |     }
40 |     .main-nav .navbar-header {
41 |         float: none;
42 |     }
43 |     .main-nav .navbar-collapse {
44 |         border-top: 1px solid #444;
45 |         padding: 0px;
46 |     }
47 |     .main-nav .navbar ul {
48 |         float: none;
49 |     }
50 |     .main-nav .navbar li {
51 |         float: none;
52 |         font-size: 15px;
53 |         margin: 6px;
54 |     }
55 |     .main-nav .navbar li a {
56 |         padding: 10px 16px;
57 |         border-radius: 4px;
58 |     }
59 |     .main-nav .navbar a {
60 |         /* If a menu item's text is too long, truncate it */
61 |         width: 100%;
62 |         white-space: nowrap;
63 |         overflow: hidden;
64 |         text-overflow: ellipsis;
65 |     }
66 | }
67 | 


--------------------------------------------------------------------------------
/ClientApp/components/navmenu/navmenu.vue.html:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="main-nav">
 3 |         <div class="navbar navbar-inverse">
 4 |             <div class="navbar-header">
 5 |                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 6 |                     <span class="sr-only">Toggle navigation</span>
 7 |                     <span class="icon-bar"></span>
 8 |                     <span class="icon-bar"></span>
 9 |                     <span class="icon-bar"></span>
10 |                 </button>
11 |                 <a class="navbar-brand" href="/">AspCoreVue</a>
12 |             </div>
13 |             <div class="clearfix"></div>
14 |             <div class="navbar-collapse collapse">
15 |                 <ul class="nav navbar-nav">
16 |                     <li>
17 |                         <router-link to="/" :exact="true">
18 |                             <span class="glyphicon glyphicon-home"></span> Home
19 |                         </router-link>
20 |                     </li>
21 |                     <li>
22 |                         <router-link to="/counter">
23 |                             <span class="glyphicon glyphicon-education"></span> Counter
24 |                         </router-link>
25 |                     </li>
26 |                     <li>
27 |                         <router-link to="/fetchdata">
28 |                             <span class="glyphicon glyphicon-th-list"></span> Fetch data
29 |                         </router-link>
30 |                     </li>
31 |                     <li>
32 |                         <router-link to="/todos">
33 |                             <span class="glyphicon glyphicon-list-alt"></span> TODO list
34 |                         </router-link>
35 |                     </li>
36 |                 </ul>
37 |             </div>
38 |         </div>
39 |     </div>
40 | </template>
41 | 
42 | <style src="./navmenu.css" />
43 | 


--------------------------------------------------------------------------------
/webpack.config.vendor.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const webpack = require('webpack');
 3 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
 4 | 
 5 | module.exports = (env) => {
 6 |     const isDevBuild = !(env && env.prod);
 7 |     const extractCSS = new ExtractTextPlugin('vendor.css');
 8 | 
 9 |     return [{
10 |         stats: { modules: false },
11 |         resolve: { extensions: [ '.js' ] },
12 |         entry: {
13 |             vendor: [
14 |                 'bootstrap',
15 |                 'bootstrap/dist/css/bootstrap.css',
16 |                 'event-source-polyfill',
17 |                 'isomorphic-fetch',
18 |                 'jquery',
19 |                 'vue',
20 |                 'vue-router',
21 |                 'vue-resource'
22 |             ],
23 |         },
24 |         module: {
25 |             rules: [
26 |                 { test: /\.css(\?|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) },
27 |                 { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
28 |             ]
29 |         },
30 |         output: { 
31 |             path: path.join(__dirname, 'wwwroot', 'dist'),
32 |             publicPath: '/dist/',
33 |             filename: '[name].js',
34 |             library: '[name]_[hash]'
35 |         },
36 |         plugins: [
37 |             extractCSS,
38 |             new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
39 |             new webpack.DefinePlugin({
40 |                 'process.env.NODE_ENV': isDevBuild ? '"development"' : '"production"'
41 |             }),
42 |             new webpack.DllPlugin({
43 |                 path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
44 |                 name: '[name]_[hash]'
45 |             })
46 |         ].concat(isDevBuild ? [] : [
47 |             new webpack.optimize.UglifyJsPlugin()
48 |         ])
49 |     }];
50 | };
51 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "version": "0.2.0",
 3 |     "compounds": [
 4 |         {
 5 |             "name": ".Net+Browser",
 6 |             "configurations": [ ".NET Core Launch (console)", "Launch Chrome" ]
 7 |         }
 8 |     ],
 9 |     "configurations": [
10 |         {
11 |             "type": "chrome",
12 |             "request": "launch",
13 |             "name": "Launch Chrome",
14 |             "url": "http://localhost:5000",
15 |             "webRoot": "${workspaceRoot}/wwwroot",
16 |             "sourceMaps": true,
17 |             "sourceMapPathOverrides": {
18 |                 "/Views": "${workspaceRoot}/Views"
19 |             }
20 |         },
21 |         {
22 |             "name": ".NET Core Launch (console)",
23 |             "type": "coreclr",
24 |             "request": "launch",
25 |             "preLaunchTask": "build",
26 |             "program": "${workspaceRoot}/bin/Debug/netcoreapp1.1/AspCoreVue.dll",
27 |             "args": [],
28 |             "cwd": "${workspaceRoot}",
29 |             "stopAtEntry": false,
30 |             "console": "internalConsole"
31 |         },
32 |         {
33 |             "name": ".NET Core Launch (web)",
34 |             "type": "coreclr",
35 |             "request": "launch",
36 |             "preLaunchTask": "build",
37 |             "program": "${workspaceRoot}/bin/Debug/netcoreapp1.1/AspCoreVue.dll",
38 |             "args": [],
39 |             "cwd": "${workspaceRoot}",
40 |             "stopAtEntry": false,
41 |             "launchBrowser": {
42 |                 "enabled": true,
43 |                 "args": "${auto-detect-url}",
44 |                 "windows": {
45 |                     "command": "cmd.exe",
46 |                     "args": "/C start ${auto-detect-url}"
47 |                 },
48 |                 "osx": {
49 |                     "command": "open"
50 |                 },
51 |                 "linux": {
52 |                     "command": "xdg-open"
53 |                 }
54 |             },
55 |             "env": {
56 |                 "ASPNETCORE_ENVIRONMENT": "Development"
57 |             },
58 |             "sourceFileMap": {
59 |                 "/Views": "${workspaceRoot}/Views"
60 |             }
61 |         },
62 |         {
63 |             "name": ".NET Core Attach",
64 |             "type": "coreclr",
65 |             "request": "attach",
66 |             "processId": "${command:pickProcess}"
67 |         }
68 |     ]
69 | }


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const webpack = require('webpack');
 3 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
 4 | const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
 5 | const bundleOutputDir = './wwwroot/dist';
 6 | 
 7 | module.exports = (env) => {
 8 |     const isDevBuild = !(env && env.prod);
 9 | 
10 |     const bundleOutputDir = './wwwroot/dist';
11 |     return [{
12 |         stats: { modules: false },
13 |         context: __dirname,
14 |         resolve: { extensions: [ '.js', '.ts' ] },
15 |         entry: { 'main': './ClientApp/boot.ts' },
16 |         module: {
17 |             rules: [
18 |                 { test: /\.vue\.html$/, include: /ClientApp/, loader: 'vue-loader', options: { loaders: { js: 'awesome-typescript-loader?silent=true' } } },
19 |                 { test: /\.ts$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
20 |                 { test: /\.css$/, use: isDevBuild ? [ 'style-loader', 'css-loader' ] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
21 |                 { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
22 |             ]
23 |         },
24 |         output: {
25 |             path: path.join(__dirname, bundleOutputDir),
26 |             filename: '[name].js',
27 |             publicPath: '/dist/'
28 |         },
29 |         plugins: [
30 |             new CheckerPlugin(),
31 |             new webpack.DefinePlugin({
32 |                 'process.env': {
33 |                     NODE_ENV: JSON.stringify(isDevBuild ? 'development' : 'production')
34 |                 }
35 |             }),
36 |             new webpack.DllReferencePlugin({
37 |                 context: __dirname,
38 |                 manifest: require('./wwwroot/dist/vendor-manifest.json')
39 |             })
40 |         ].concat(isDevBuild ? [
41 |             // Plugins that apply in development builds only
42 |             new webpack.SourceMapDevToolPlugin({
43 |                 filename: '[file].map', // Remove this line if you prefer inline source maps
44 |                 moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
45 |             })
46 |         ] : [
47 |             // Plugins that apply in production builds only
48 |             new webpack.optimize.UglifyJsPlugin()
49 |         ])
50 |     }];
51 | };
52 | 


--------------------------------------------------------------------------------
/Startup.cs:
--------------------------------------------------------------------------------
 1 | using System;
 2 | using System.Collections.Generic;
 3 | using System.Linq;
 4 | using System.Threading.Tasks;
 5 | using Microsoft.AspNetCore.Builder;
 6 | using Microsoft.AspNetCore.Hosting;
 7 | using Microsoft.AspNetCore.SpaServices.Webpack;
 8 | using Microsoft.Extensions.Configuration;
 9 | using Microsoft.Extensions.DependencyInjection;
10 | using Microsoft.Extensions.Logging;
11 | 
12 | namespace AspCoreVue
13 | {
14 |     public class Startup
15 |     {
16 |         public Startup(IHostingEnvironment env)
17 |         {
18 |             var builder = new ConfigurationBuilder()
19 |                 .SetBasePath(env.ContentRootPath)
20 |                 .AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
21 |                 .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true)
22 |                 .AddEnvironmentVariables();
23 |             Configuration = builder.Build();
24 |         }
25 | 
26 |         public IConfigurationRoot Configuration { get; }
27 | 
28 |         // This method gets called by the runtime. Use this method to add services to the container.
29 |         public void ConfigureServices(IServiceCollection services)
30 |         {
31 |             // Add framework services.
32 |             services.AddMvc();
33 |         }
34 | 
35 |         // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
36 |         public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
37 |         {
38 |             loggerFactory.AddConsole(Configuration.GetSection("Logging"));
39 |             loggerFactory.AddDebug();
40 | 
41 |             if (env.IsDevelopment())
42 |             {
43 |                 app.UseDeveloperExceptionPage();
44 |                 app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
45 |                     HotModuleReplacement = true
46 |                 });
47 |             }
48 |             else
49 |             {
50 |                 app.UseExceptionHandler("/Home/Error");
51 |             }
52 | 
53 |             app.UseStaticFiles();
54 | 
55 |             app.UseMvc(routes =>
56 |             {
57 |                 routes.MapRoute(
58 |                     name: "default",
59 |                     template: "{controller=Home}/{action=Index}/{id?}");
60 | 
61 |                 routes.MapSpaFallbackRoute(
62 |                     name: "spa-fallback",
63 |                     defaults: new { controller = "Home", action = "Index" });
64 |             });
65 |         }
66 |     }
67 | }
68 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | /Properties/launchSettings.json
  2 | 
  3 | ## Ignore Visual Studio temporary files, build results, and
  4 | ## files generated by popular Visual Studio add-ons.
  5 | 
  6 | # User-specific files
  7 | *.suo
  8 | *.user
  9 | *.userosscache
 10 | *.sln.docstates
 11 | 
 12 | # User-specific files (MonoDevelop/Xamarin Studio)
 13 | *.userprefs
 14 | 
 15 | # Build results
 16 | [Dd]ebug/
 17 | [Dd]ebugPublic/
 18 | [Rr]elease/
 19 | [Rr]eleases/
 20 | x64/
 21 | x86/
 22 | build/
 23 | bld/
 24 | bin/
 25 | Bin/
 26 | obj/
 27 | Obj/
 28 | 
 29 | # Visual Studio 2015 cache/options directory
 30 | .vs/
 31 | /wwwroot/dist/
 32 | 
 33 | /yarn.lock
 34 | 
 35 | # MSTest test Results
 36 | [Tt]est[Rr]esult*/
 37 | [Bb]uild[Ll]og.*
 38 | 
 39 | # NUNIT
 40 | *.VisualState.xml
 41 | TestResult.xml
 42 | 
 43 | # Build Results of an ATL Project
 44 | [Dd]ebugPS/
 45 | [Rr]eleasePS/
 46 | dlldata.c
 47 | 
 48 | # DNX
 49 | artifacts/
 50 | 
 51 | *_i.c
 52 | *_p.c
 53 | *_i.h
 54 | *.ilk
 55 | *.meta
 56 | *.obj
 57 | *.pch
 58 | *.pdb
 59 | *.pgc
 60 | *.pgd
 61 | *.rsp
 62 | *.sbr
 63 | *.tlb
 64 | *.tli
 65 | *.tlh
 66 | *.tmp
 67 | *.tmp_proj
 68 | *.log
 69 | *.vspscc
 70 | *.vssscc
 71 | .builds
 72 | *.pidb
 73 | *.svclog
 74 | *.scc
 75 | 
 76 | # Chutzpah Test files
 77 | _Chutzpah*
 78 | 
 79 | # Visual C++ cache files
 80 | ipch/
 81 | *.aps
 82 | *.ncb
 83 | *.opendb
 84 | *.opensdf
 85 | *.sdf
 86 | *.cachefile
 87 | 
 88 | # Visual Studio profiler
 89 | *.psess
 90 | *.vsp
 91 | *.vspx
 92 | *.sap
 93 | 
 94 | # TFS 2012 Local Workspace
 95 | $tf/
 96 | 
 97 | # Guidance Automation Toolkit
 98 | *.gpState
 99 | 
100 | # ReSharper is a .NET coding add-in
101 | _ReSharper*/
102 | *.[Rr]e[Ss]harper
103 | *.DotSettings.user
104 | 
105 | # JustCode is a .NET coding add-in
106 | .JustCode
107 | 
108 | # TeamCity is a build add-in
109 | _TeamCity*
110 | 
111 | # DotCover is a Code Coverage Tool
112 | *.dotCover
113 | 
114 | # NCrunch
115 | _NCrunch_*
116 | .*crunch*.local.xml
117 | nCrunchTemp_*
118 | 
119 | # MightyMoose
120 | *.mm.*
121 | AutoTest.Net/
122 | 
123 | # Web workbench (sass)
124 | .sass-cache/
125 | 
126 | # Installshield output folder
127 | [Ee]xpress/
128 | 
129 | # DocProject is a documentation generator add-in
130 | DocProject/buildhelp/
131 | DocProject/Help/*.HxT
132 | DocProject/Help/*.HxC
133 | DocProject/Help/*.hhc
134 | DocProject/Help/*.hhk
135 | DocProject/Help/*.hhp
136 | DocProject/Help/Html2
137 | DocProject/Help/html
138 | 
139 | # Click-Once directory
140 | publish/
141 | 
142 | # Publish Web Output
143 | *.[Pp]ublish.xml
144 | *.azurePubxml
145 | # TODO: Comment the next line if you want to checkin your web deploy settings
146 | # but database connection strings (with potential passwords) will be unencrypted
147 | *.pubxml
148 | *.publishproj
149 | 
150 | # NuGet Packages
151 | *.nupkg
152 | # The packages folder can be ignored because of Package Restore
153 | **/packages/*
154 | # except build/, which is used as an MSBuild target.
155 | !**/packages/build/
156 | # Uncomment if necessary however generally it will be regenerated when needed
157 | #!**/packages/repositories.config
158 | 
159 | # Microsoft Azure Build Output
160 | csx/
161 | *.build.csdef
162 | 
163 | # Microsoft Azure Emulator
164 | ecf/
165 | rcf/
166 | 
167 | # Microsoft Azure ApplicationInsights config file
168 | ApplicationInsights.config
169 | 
170 | # Windows Store app package directory
171 | AppPackages/
172 | BundleArtifacts/
173 | 
174 | # Visual Studio cache files
175 | # files ending in .cache can be ignored
176 | *.[Cc]ache
177 | # but keep track of directories ending in .cache
178 | !*.[Cc]ache/
179 | 
180 | # Others
181 | ClientBin/
182 | ~$*
183 | *~
184 | *.dbmdl
185 | *.dbproj.schemaview
186 | *.pfx
187 | *.publishsettings
188 | orleans.codegen.cs
189 | 
190 | /node_modules
191 | 
192 | # RIA/Silverlight projects
193 | Generated_Code/
194 | 
195 | # Backup & report files from converting an old project file
196 | # to a newer Visual Studio version. Backup files are not needed,
197 | # because we have git ;-)
198 | _UpgradeReport_Files/
199 | Backup*/
200 | UpgradeLog*.XML
201 | UpgradeLog*.htm
202 | 
203 | # SQL Server files
204 | *.mdf
205 | *.ldf
206 | 
207 | # Business Intelligence projects
208 | *.rdl.data
209 | *.bim.layout
210 | *.bim_*.settings
211 | 
212 | # Microsoft Fakes
213 | FakesAssemblies/
214 | 
215 | # GhostDoc plugin setting file
216 | *.GhostDoc.xml
217 | 
218 | # Node.js Tools for Visual Studio
219 | .ntvs_analysis.dat
220 | 
221 | # Visual Studio 6 build log
222 | *.plg
223 | 
224 | # Visual Studio 6 workspace options file
225 | *.opt
226 | 
227 | # Visual Studio LightSwitch build output
228 | **/*.HTMLClient/GeneratedArtifacts
229 | **/*.DesktopClient/GeneratedArtifacts
230 | **/*.DesktopClient/ModelManifest.xml
231 | **/*.Server/GeneratedArtifacts
232 | **/*.Server/ModelManifest.xml
233 | _Pvt_Extensions
234 | 
235 | # Paket dependency manager
236 | .paket/paket.exe
237 | 
238 | # FAKE - F# Make
239 | .fake/
240 | 


--------------------------------------------------------------------------------