├── content ├── ClientApp │ ├── store │ │ ├── api.js │ │ └── index.js │ ├── boot-app.js │ ├── router │ │ ├── index.js │ │ └── routes.js │ ├── boot-server.js │ ├── app.js │ ├── components │ │ ├── app-root.vue │ │ ├── counter-example.vue │ │ ├── nav-menu.vue │ │ ├── home-page.vue │ │ ├── about.vue │ │ └── fetch-data.vue │ ├── icons.js │ └── css │ │ └── site.css ├── Views │ ├── _ViewStart.cshtml │ ├── _ViewImports.cshtml │ ├── Home │ │ └── Index.cshtml │ └── Shared │ │ ├── Error.cshtml │ │ └── _Layout.cshtml ├── repo-example.png ├── appsettings.json ├── appsettings.Development.json ├── Providers │ ├── IWeatherProvider.cs │ └── WeatherProviderFake.cs ├── .editorconfig ├── Models │ └── WeatherForecast.cs ├── Controllers │ ├── HomeController.cs │ └── WeatherController.cs ├── Program.cs ├── web.config ├── Dockerfile ├── .eslintrc.js ├── .babelrc ├── Vue2Spa.sln ├── LICENSE.md ├── Vue2Spa.csproj ├── .template.config │ └── template.json ├── .gitattributes ├── webpack.config.vendor.js ├── Startup.cs ├── webpack.config.js ├── package.json ├── .gitignore └── README.md ├── .gitignore ├── .vscode ├── tasks.json └── launch.json ├── LICENSE.md ├── aspnetcore-vuejs.nuspec ├── .gitattributes ├── CODE_OF_CONDUCT.md └── README.md /content/ClientApp/store/api.js: -------------------------------------------------------------------------------- 1 | export function test () { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /content/Views/_ViewStart.cshtml: -------------------------------------------------------------------------------- 1 | @{ 2 | Layout = "_Layout"; 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Make sure nupkg files don't get pushed to git repo 2 | **/*.nupkg 3 | /.vs 4 | -------------------------------------------------------------------------------- /content/repo-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TrilonIO/aspnetcore-Vue-starter/HEAD/content/repo-example.png -------------------------------------------------------------------------------- /content/appsettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "Logging": { 3 | "LogLevel": { 4 | "Default": "Warning" 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /content/Views/_ViewImports.cshtml: -------------------------------------------------------------------------------- 1 | @using Vue2Spa 2 | @addTagHelper "*, Microsoft.AspNetCore.Mvc.TagHelpers" 3 | @addTagHelper "*, Microsoft.AspNetCore.SpaServices" 4 | -------------------------------------------------------------------------------- /content/ClientApp/boot-app.js: -------------------------------------------------------------------------------- 1 | import './css/site.css' 2 | import 'core-js/es6/promise' 3 | import 'core-js/es6/array' 4 | 5 | import { app } from './app' 6 | 7 | app.$mount('#app') 8 | -------------------------------------------------------------------------------- /content/Views/Home/Index.cshtml: -------------------------------------------------------------------------------- 1 | @{ ViewData["Title"] = "Home Page"; } 2 | 3 |
4 | 5 | @section scripts { 6 | 7 | } 8 | -------------------------------------------------------------------------------- /content/Views/Shared/Error.cshtml: -------------------------------------------------------------------------------- 1 | @{ 2 | ViewData["Title"] = "Error"; 3 | } 4 | 5 |

Error.

6 |

An error occurred while processing your request.

7 | -------------------------------------------------------------------------------- /content/appsettings.Development.json: -------------------------------------------------------------------------------- 1 | { 2 | "Logging": { 3 | "LogLevel": { 4 | "Default": "Debug", 5 | "System": "Information", 6 | "Microsoft": "Information" 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /content/Providers/IWeatherProvider.cs: -------------------------------------------------------------------------------- 1 | using System.Collections.Generic; 2 | using Vue2Spa.Models; 3 | 4 | namespace Vue2Spa.Providers 5 | { 6 | public interface IWeatherProvider 7 | { 8 | List GetForecasts(); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /content/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | end_of_line = lf 7 | insert_final_newline = true 8 | trim_trailing_whitespace = true 9 | 10 | [*.cs] 11 | indent_size = 4 12 | 13 | [*.{js,json,vue}] 14 | indent_size = 2 15 | -------------------------------------------------------------------------------- /content/ClientApp/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | import { routes } from './routes' 4 | 5 | Vue.use(VueRouter) 6 | 7 | let router = new VueRouter({ 8 | mode: 'history', 9 | routes 10 | }) 11 | 12 | export default router 13 | -------------------------------------------------------------------------------- /content/Models/WeatherForecast.cs: -------------------------------------------------------------------------------- 1 | namespace Vue2Spa.Models 2 | { 3 | public class WeatherForecast 4 | { 5 | public string DateFormatted { get; set; } 6 | 7 | public string Summary { get; set; } 8 | 9 | public int TemperatureC { get; set; } 10 | 11 | public int TemperatureF => 32 + (int)(TemperatureC / 0.5556); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "2.0.0", 3 | "tasks": [ 4 | { 5 | "label": "build", 6 | "command": "dotnet", 7 | "type": "process", 8 | "args": [ 9 | "build", 10 | "${workspaceFolder}/content/Vue2Spa.csproj" 11 | ], 12 | "problemMatcher": "$msCompile" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /content/Controllers/HomeController.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Mvc; 2 | 3 | namespace Vue2Spa.Controllers 4 | { 5 | public class HomeController : Controller 6 | { 7 | public IActionResult Index() 8 | { 9 | return View(); 10 | } 11 | 12 | public IActionResult Error() 13 | { 14 | return View(); 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /content/Program.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore; 2 | using Microsoft.AspNetCore.Hosting; 3 | 4 | namespace Vue2Spa 5 | { 6 | public class Program 7 | { 8 | public static void Main(string[] args) 9 | { 10 | CreateWebHostBuilder(args).Build().Run(); 11 | } 12 | 13 | public static IWebHostBuilder CreateWebHostBuilder(string[] args) => 14 | WebHost.CreateDefaultBuilder(args) 15 | .UseStartup(); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /content/ClientApp/boot-server.js: -------------------------------------------------------------------------------- 1 | var prerendering = require('aspnet-prerendering') 2 | 3 | module.exports = prerendering.createServerRenderer(function (params) { 4 | return new Promise(function (resolve, reject) { 5 | var result = '

Loading...

' + 6 | '

Current time in Node is: ' + new Date() + '

' + 7 | '

Request path is: ' + params.location.path + '

' + 8 | '

Absolute URL is: ' + params.absoluteUrl + '

' 9 | 10 | resolve({ html: result }) 11 | }) 12 | }) 13 | -------------------------------------------------------------------------------- /content/ClientApp/app.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import axios from 'axios' 3 | import router from './router/index' 4 | import store from './store' 5 | import { sync } from 'vuex-router-sync' 6 | import App from 'components/app-root' 7 | import { FontAwesomeIcon } from './icons' 8 | 9 | // Registration of global components 10 | Vue.component('icon', FontAwesomeIcon) 11 | 12 | Vue.prototype.$http = axios 13 | 14 | sync(store, router) 15 | 16 | const app = new Vue({ 17 | store, 18 | router, 19 | ...App 20 | }) 21 | 22 | export { 23 | app, 24 | router, 25 | store 26 | } 27 | -------------------------------------------------------------------------------- /content/ClientApp/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | Vue.use(Vuex) 5 | 6 | // TYPES 7 | const MAIN_SET_COUNTER = 'MAIN_SET_COUNTER' 8 | 9 | // STATE 10 | const state = { 11 | counter: 1 12 | } 13 | 14 | // MUTATIONS 15 | const mutations = { 16 | [MAIN_SET_COUNTER] (state, obj) { 17 | state.counter = obj.counter 18 | } 19 | } 20 | 21 | // ACTIONS 22 | const actions = ({ 23 | setCounter ({ commit }, obj) { 24 | commit(MAIN_SET_COUNTER, obj) 25 | } 26 | }) 27 | 28 | export default new Vuex.Store({ 29 | state, 30 | mutations, 31 | actions 32 | }) 33 | -------------------------------------------------------------------------------- /content/web.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /content/ClientApp/router/routes.js: -------------------------------------------------------------------------------- 1 | import CounterExample from 'components/counter-example' 2 | import FetchData from 'components/fetch-data' 3 | import HomePage from 'components/home-page' 4 | import About from 'components/about' 5 | 6 | export const routes = [ 7 | { name: 'home', path: '/', component: HomePage, display: 'Home', icon: 'home' }, 8 | { name: 'about', path: '/about', component: About, display: 'About Template', icon: 'info' }, 9 | { name: 'counter', path: '/counter', component: CounterExample, display: 'Counter', icon: 'graduation-cap' }, 10 | { name: 'fetch-data', path: '/fetch-data', component: FetchData, display: 'Data', icon: 'list' } 11 | ] 12 | -------------------------------------------------------------------------------- /content/ClientApp/components/app-root.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 27 | 28 | 30 | -------------------------------------------------------------------------------- /content/Views/Shared/_Layout.cshtml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | @ViewData["Title"] - aspnetcore_Vue_starter 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | @RenderBody() 17 | 18 | 19 | @RenderSection("scripts", required: false) 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /content/Dockerfile: -------------------------------------------------------------------------------- 1 | # Stage 1 - Restoring & Compiling 2 | FROM microsoft/dotnet:2.2-sdk-alpine3.8 as builder 3 | WORKDIR /source 4 | RUN apk add --update nodejs nodejs-npm 5 | COPY *.csproj . 6 | RUN dotnet restore 7 | COPY package.json . 8 | RUN npm install 9 | COPY . . 10 | RUN dotnet publish -c Release -o /app/ 11 | 12 | # Stage 2 - Creating Image for compiled app 13 | FROM microsoft/dotnet:2.2-aspnetcore-runtime-alpine3.8 as baseimage 14 | RUN apk add --update nodejs nodejs-npm 15 | WORKDIR /app 16 | COPY --from=builder /app . 17 | ENV ASPNETCORE_URLS=http://+:$port 18 | 19 | # Run the application. REPLACE the name of dll with the name of the dll produced by your application 20 | EXPOSE $port 21 | CMD ["dotnet", "vue2spa.dll"] 22 | -------------------------------------------------------------------------------- /content/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: 'babel-eslint', 4 | parserOptions: { 5 | sourceType: 'module' 6 | }, 7 | // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style 8 | extends: 'standard', 9 | // We could also use the https://github.com/vuejs/eslint-plugin-vue 10 | // required to lint *.vue files 11 | plugins: [ 12 | 'html' 13 | ], 14 | // add your custom rules here 15 | 'rules': { 16 | // allow paren-less arrow functions 17 | 'arrow-parens': 0, 18 | // allow async-await 19 | 'generator-star-spacing': 0, 20 | // allow debugger during development 21 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /content/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env" 4 | ], 5 | "plugins": [ 6 | "@babel/plugin-transform-runtime", 7 | "@babel/plugin-transform-async-to-generator", 8 | "@babel/plugin-syntax-dynamic-import", 9 | "@babel/plugin-syntax-import-meta", 10 | "@babel/plugin-proposal-class-properties", 11 | "@babel/plugin-proposal-json-strings", 12 | [ 13 | "@babel/plugin-proposal-decorators", 14 | { 15 | "legacy": true 16 | } 17 | ], 18 | "@babel/plugin-proposal-function-sent", 19 | "@babel/plugin-proposal-export-namespace-from", 20 | "@babel/plugin-proposal-numeric-separator", 21 | "@babel/plugin-proposal-throw-expressions" 22 | ], 23 | "comments": false 24 | } 25 | -------------------------------------------------------------------------------- /content/ClientApp/icons.js: -------------------------------------------------------------------------------- 1 | import { library } from '@fortawesome/fontawesome-svg-core' 2 | // Official documentation available at: https://github.com/FortAwesome/vue-fontawesome 3 | import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' 4 | 5 | import { faEnvelope, faHeart, faGraduationCap, faHome, faInfo, faList, faSpinner } from '@fortawesome/free-solid-svg-icons' 6 | import { faFontAwesome, faMicrosoft, faVuejs } from '@fortawesome/free-brands-svg-icons' 7 | 8 | // If not present, it won't be visible within the application. Considering that you 9 | // don't want all the icons for no reason. This is a good way to avoid importing too many 10 | // unnecessary things. 11 | library.add( 12 | faEnvelope, 13 | faHeart, 14 | faGraduationCap, 15 | faHome, 16 | faInfo, 17 | faList, 18 | faSpinner, 19 | 20 | // Brands 21 | faFontAwesome, 22 | faMicrosoft, 23 | faVuejs 24 | ) 25 | 26 | export { 27 | FontAwesomeIcon 28 | } 29 | -------------------------------------------------------------------------------- /content/Vue2Spa.sln: -------------------------------------------------------------------------------- 1 | 2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio 15 4 | VisualStudioVersion = 15.0.26228.4 5 | MinimumVisualStudioVersion = 10.0.40219.1 6 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Vue2Spa", "Vue2Spa.csproj", "{B5FE715F-AB99-4FA6-AEC1-D3B644C76DF7}" 7 | EndProject 8 | Global 9 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 10 | Debug|Any CPU = Debug|Any CPU 11 | Release|Any CPU = Release|Any CPU 12 | EndGlobalSection 13 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 14 | {B5FE715F-AB99-4FA6-AEC1-D3B644C76DF7}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 15 | {B5FE715F-AB99-4FA6-AEC1-D3B644C76DF7}.Debug|Any CPU.Build.0 = Debug|Any CPU 16 | {B5FE715F-AB99-4FA6-AEC1-D3B644C76DF7}.Release|Any CPU.ActiveCfg = Release|Any CPU 17 | {B5FE715F-AB99-4FA6-AEC1-D3B644C76DF7}.Release|Any CPU.Build.0 = Release|Any CPU 18 | EndGlobalSection 19 | GlobalSection(SolutionProperties) = preSolution 20 | HideSolutionNode = FALSE 21 | EndGlobalSection 22 | EndGlobal 23 | -------------------------------------------------------------------------------- /content/LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016-2018 Mark Pieszak 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /content/Providers/WeatherProviderFake.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using Vue2Spa.Models; 5 | 6 | namespace Vue2Spa.Providers 7 | { 8 | public class WeatherProviderFake : IWeatherProvider 9 | { 10 | private readonly string[] _summaries = { 11 | "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" 12 | }; 13 | 14 | private List WeatherForecasts { get; set; } 15 | 16 | public WeatherProviderFake() 17 | { 18 | Initialize(50); 19 | } 20 | 21 | private void Initialize(int quantity) 22 | { 23 | var rng = new Random(); 24 | WeatherForecasts = Enumerable.Range(1, quantity).Select(index => new WeatherForecast 25 | { 26 | DateFormatted = DateTime.Now.AddDays(index).ToString("d"), 27 | TemperatureC = rng.Next(-20, 55), 28 | Summary = _summaries[rng.Next(_summaries.Length)] 29 | }).ToList(); 30 | } 31 | 32 | public List GetForecasts() 33 | { 34 | return WeatherForecasts; 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # The MIT License (MIT) 2 | 3 | Copyright (c) 2016-2019 [Trilon.io](https://trilon.io) & [Mark Pieszak](https://github.com/MarkPieszak) 4 | 5 | * * * 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in all 15 | copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23 | SOFTWARE. 24 | -------------------------------------------------------------------------------- /aspnetcore-vuejs.nuspec: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | aspnetcore-vuejs 5 | 1.0.9 6 | 7 | Starter Template for ASP.NET Core and Vue.JS (Vue) 8 | 9 | Featuring: 10 | - Webpack (with HMR) 11 | - Web API 12 | - VueJS 2 13 | - Vuex (state manangement) 14 | - Modern best-practices 15 | 16 | Brought to you by Trilon.io Consulting 17 | 18 | Mark Pieszak 19 | Mark Pieszak 20 | https://github.com/TrilonIO/aspnetcore-Vue-starter 21 | https://github.com/TrilonIO/aspnetcore-Vue-starter/blob/master/LICENSE.md 22 | https://trilon.io/android-chrome-192x192.png 23 | vue vuejs vue.js vue3 aspnet aspnetcore core dotnet webapi vuex trilon 24 | 25 | 26 | 27 | 28 | 29 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /content/Vue2Spa.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | netcoreapp2.2 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | %(DistFiles.Identity) 27 | PreserveNewest 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /content/ClientApp/components/counter-example.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 56 | 57 | 59 | -------------------------------------------------------------------------------- /content/Controllers/WeatherController.cs: -------------------------------------------------------------------------------- 1 | using System.Linq; 2 | using Microsoft.AspNetCore.Mvc; 3 | using Vue2Spa.Providers; 4 | 5 | namespace Vue2Spa.Controllers 6 | { 7 | [Route("api/[controller]")] 8 | public class WeatherController : Controller 9 | { 10 | private readonly IWeatherProvider _weatherProvider; 11 | 12 | public WeatherController(IWeatherProvider weatherProvider) 13 | { 14 | _weatherProvider = weatherProvider; 15 | } 16 | 17 | [HttpGet("[action]")] 18 | public IActionResult Forecasts([FromQuery(Name = "from")] int from = 0, [FromQuery(Name = "to")] int to = 4) 19 | { 20 | //System.Threading.Thread.Sleep(500); // Fake latency 21 | var quantity = to - from; 22 | 23 | // We should also avoid going too far in the list. 24 | if (quantity <= 0) 25 | { 26 | return BadRequest("You cannot have the 'to' parameter higher than 'from' parameter."); 27 | } 28 | 29 | if (from < 0) 30 | { 31 | return BadRequest("You cannot go in the negative with the 'from' parameter"); 32 | } 33 | 34 | var allForecasts = _weatherProvider.GetForecasts(); 35 | var result = new 36 | { 37 | Total = allForecasts.Count, 38 | Forecasts = allForecasts.Skip(from).Take(quantity).ToArray() 39 | }; 40 | 41 | return Ok(result); 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /content/.template.config/template.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "http://json.schemastore.org/template", 3 | "author": "Mark Pieszak", 4 | "classifications": [ "Web", "MVC", "SPA" ], 5 | "groupIdentity": "aspnetcore-vuejs", 6 | "identity": "aspnetcore-vuejs.1.0", 7 | "name": "ASP.NET Core with Vue.js 2", 8 | "primaryOutputs": [ 9 | { 10 | "path": "Vue2Spa.csproj" 11 | } 12 | ], 13 | "shortName": "vuejs", 14 | "tags": { 15 | "language": "C#", 16 | "type": "project" 17 | }, 18 | "sourceName": "Vue2Spa", 19 | "preferNameDirectory": true, 20 | "sources": [ 21 | { 22 | "source": "./", 23 | "target": "./", 24 | "exclude": [ 25 | ".template.config/**" 26 | ] 27 | } 28 | ], 29 | "guids": [ 30 | "B5FE715F-AB99-4FA6-AEC1-D3B644C76DF7" 31 | ], 32 | "symbols": { 33 | "skipRestore": { 34 | "type": "parameter", 35 | "datatype": "bool", 36 | "description": "If specified, skips the automatic restore of the project on create.", 37 | "defaultValue": "false" 38 | } 39 | }, 40 | "postActions": [ 41 | { 42 | "condition": "(!skipRestore)", 43 | "description": "Restore NuGet packages required by this project.", 44 | "manualInstructions": [ 45 | { 46 | "text": "Run 'dotnet restore'" 47 | } 48 | ], 49 | "actionId": "210D431B-A78B-4D2F-B762-4ED3E3EA9025", 50 | "continueOnError": true 51 | } 52 | ] 53 | } 54 | -------------------------------------------------------------------------------- /content/.gitattributes: -------------------------------------------------------------------------------- 1 | ############################################################################### 2 | # Auto detect text files and perform LF normalization 3 | ############################################################################### 4 | * text=auto 5 | 6 | ############################################################################### 7 | # Force text and use native line endings for configuration and plain text 8 | # files, for easier editing on any platform. 9 | ############################################################################### 10 | *.cs text 11 | *.cshtml text 12 | *.js text 13 | *.vue text 14 | *.json text 15 | *.css text 16 | *.md text 17 | *.config text 18 | 19 | ############################################################################### 20 | # Set default behavior for command prompt diff. 21 | ############################################################################### 22 | *.cs diff=csharp 23 | 24 | ############################################################################### 25 | # Set the merge driver for project and solution files 26 | # 27 | # Merging from the command prompt will add diff markers to the files if there 28 | # are conflicts (Merging from VS is not affected by the settings below, in VS 29 | # the diff markers are never inserted). Diff markers may cause the following 30 | # file extensions to fail to load in VS. An alternative would be to treat 31 | # these files as binary and thus will always conflict and require user 32 | # intervention with every merge. To do so, just uncomment the entries below 33 | ############################################################################### 34 | *.sln merge=binary 35 | *.csproj merge=binary 36 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to find out which attributes exist for C# debugging 3 | // Use hover for the description of the existing attributes 4 | // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "name": ".NET Core Launch (web)", 9 | "type": "coreclr", 10 | "request": "launch", 11 | "preLaunchTask": "build", 12 | // If you have changed target frameworks, make sure to update the program path. 13 | "program": "${workspaceFolder}/content/bin/Debug/netcoreapp2.1/Vue2Spa.dll", 14 | "args": [], 15 | "cwd": "${workspaceFolder}/content", 16 | "stopAtEntry": false, 17 | "internalConsoleOptions": "openOnSessionStart", 18 | "launchBrowser": { 19 | "enabled": true, 20 | "args": "${auto-detect-url}", 21 | "windows": { 22 | "command": "cmd.exe", 23 | "args": "/C start ${auto-detect-url}" 24 | }, 25 | "osx": { 26 | "command": "open" 27 | }, 28 | "linux": { 29 | "command": "xdg-open" 30 | } 31 | }, 32 | "env": { 33 | "ASPNETCORE_ENVIRONMENT": "Development" 34 | }, 35 | "sourceFileMap": { 36 | "/Views": "${workspaceFolder}/Views" 37 | } 38 | }, 39 | { 40 | "name": ".NET Core Attach", 41 | "type": "coreclr", 42 | "request": "attach", 43 | "processId": "${command:pickProcess}" 44 | } 45 | ,] 46 | } -------------------------------------------------------------------------------- /content/ClientApp/components/nav-menu.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 45 | 46 | 58 | -------------------------------------------------------------------------------- /content/webpack.config.vendor.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') 4 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 5 | 6 | module.exports = () => { 7 | console.log('Building vendor files for \x1b[33m%s\x1b[0m', process.env.NODE_ENV) 8 | 9 | const isDevBuild = !(process.env.NODE_ENV && process.env.NODE_ENV === 'production') 10 | 11 | const extractCSS = new MiniCssExtractPlugin({ 12 | filename: 'vendor.css' 13 | }) 14 | 15 | return [{ 16 | mode: (isDevBuild ? 'development' : 'production' ), 17 | stats: { modules: false }, 18 | resolve: { 19 | extensions: ['.js'] 20 | }, 21 | module: { 22 | rules: [ 23 | { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }, 24 | { test: /\.css(\?|$)/, use: [MiniCssExtractPlugin.loader, 'css-loader'] } 25 | ] 26 | }, 27 | entry: { 28 | vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'event-source-polyfill', 'vue', 'vuex', 'axios', 'vue-router', 'jquery'] 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 | // Compress extracted CSS. 39 | new OptimizeCSSPlugin({ 40 | cssProcessorOptions: { 41 | safe: true 42 | } 43 | }), 44 | new webpack.ProvidePlugin({ 45 | $: 'jquery', 46 | jQuery: 'jquery', 47 | Popper: ['popper.js', 'default'] 48 | /* For modal, you will need to add tether */ 49 | }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) 50 | new webpack.DllPlugin({ 51 | path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), 52 | name: '[name]_[hash]' 53 | }) 54 | ] 55 | }] 56 | } 57 | -------------------------------------------------------------------------------- /content/ClientApp/components/home-page.vue: -------------------------------------------------------------------------------- 1 | 56 | 57 | 64 | 65 | 68 | -------------------------------------------------------------------------------- /content/Startup.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Builder; 2 | using Microsoft.AspNetCore.Hosting; 3 | using Microsoft.AspNetCore.Mvc; 4 | using Microsoft.AspNetCore.SpaServices.Webpack; 5 | using Microsoft.Extensions.Configuration; 6 | using Microsoft.Extensions.DependencyInjection; 7 | using Vue2Spa.Providers; 8 | 9 | namespace Vue2Spa 10 | { 11 | public class Startup 12 | { 13 | public Startup(IConfiguration configuration) 14 | { 15 | Configuration = configuration; 16 | } 17 | 18 | public IConfiguration Configuration { get; } 19 | 20 | // This method gets called by the runtime. Use this method to add services to the container. 21 | public void ConfigureServices(IServiceCollection services) 22 | { 23 | // Add framework services. 24 | services.AddMvc() 25 | .SetCompatibilityVersion(CompatibilityVersion.Version_2_2); 26 | 27 | // Simple example with dependency injection for a data provider. 28 | services.AddSingleton(); 29 | } 30 | 31 | // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. 32 | public void Configure(IApplicationBuilder app, IHostingEnvironment env) 33 | { 34 | if (env.IsDevelopment()) 35 | { 36 | app.UseDeveloperExceptionPage(); 37 | 38 | // Webpack initialization with hot-reload. 39 | app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions 40 | { 41 | HotModuleReplacement = true, 42 | }); 43 | } 44 | else 45 | { 46 | app.UseExceptionHandler("/Home/Error"); 47 | 48 | // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. 49 | app.UseHsts(); 50 | } 51 | 52 | app.UseHttpsRedirection(); 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 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | ############################################################################### 2 | # Set default behavior to automatically normalize line endings. 3 | ############################################################################### 4 | * text=auto 5 | 6 | ############################################################################### 7 | # Set default behavior for command prompt diff. 8 | # 9 | # This is need for earlier builds of msysgit that does not have it on by 10 | # default for csharp files. 11 | # Note: This is only used by command line 12 | ############################################################################### 13 | #*.cs diff=csharp 14 | 15 | ############################################################################### 16 | # Set the merge driver for project and solution files 17 | # 18 | # Merging from the command prompt will add diff markers to the files if there 19 | # are conflicts (Merging from VS is not affected by the settings below, in VS 20 | # the diff markers are never inserted). Diff markers may cause the following 21 | # file extensions to fail to load in VS. An alternative would be to treat 22 | # these files as binary and thus will always conflict and require user 23 | # intervention with every merge. To do so, just uncomment the entries below 24 | ############################################################################### 25 | #*.sln merge=binary 26 | #*.csproj merge=binary 27 | #*.vbproj merge=binary 28 | #*.vcxproj merge=binary 29 | #*.vcproj merge=binary 30 | #*.dbproj merge=binary 31 | #*.fsproj merge=binary 32 | #*.lsproj merge=binary 33 | #*.wixproj merge=binary 34 | #*.modelproj merge=binary 35 | #*.sqlproj merge=binary 36 | #*.wwaproj merge=binary 37 | 38 | ############################################################################### 39 | # behavior for image files 40 | # 41 | # image files are treated as binary by default. 42 | ############################################################################### 43 | #*.jpg binary 44 | #*.png binary 45 | #*.gif binary 46 | 47 | ############################################################################### 48 | # diff behavior for common document formats 49 | # 50 | # Convert binary document formats to text before diffing them. This feature 51 | # is only available from the command line. Turn it on by uncommenting the 52 | # entries below. 53 | ############################################################################### 54 | #*.doc diff=astextplain 55 | #*.DOC diff=astextplain 56 | #*.docx diff=astextplain 57 | #*.DOCX diff=astextplain 58 | #*.dot diff=astextplain 59 | #*.DOT diff=astextplain 60 | #*.pdf diff=astextplain 61 | #*.PDF diff=astextplain 62 | #*.rtf diff=astextplain 63 | #*.RTF diff=astextplain 64 | -------------------------------------------------------------------------------- /content/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 4 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 5 | const bundleOutputDir = './wwwroot/dist' 6 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 7 | 8 | module.exports = () => { 9 | console.log('Building for \x1b[33m%s\x1b[0m', process.env.NODE_ENV) 10 | 11 | const isDevBuild = !(process.env.NODE_ENV && process.env.NODE_ENV === 'production') 12 | 13 | const extractCSS = new MiniCssExtractPlugin({ 14 | filename: 'style.css' 15 | }) 16 | 17 | return [{ 18 | mode: (isDevBuild ? 'development' :'production' ), 19 | stats: { modules: false }, 20 | entry: { 'main': './ClientApp/boot-app.js' }, 21 | resolve: { 22 | extensions: ['.js', '.vue'], 23 | alias: isDevBuild ? { 24 | 'vue$': 'vue/dist/vue', 25 | 'components': path.resolve(__dirname, './ClientApp/components'), 26 | 'views': path.resolve(__dirname, './ClientApp/views'), 27 | 'utils': path.resolve(__dirname, './ClientApp/utils'), 28 | 'api': path.resolve(__dirname, './ClientApp/store/api') 29 | } : { 30 | 'components': path.resolve(__dirname, './ClientApp/components'), 31 | 'views': path.resolve(__dirname, './ClientApp/views'), 32 | 'utils': path.resolve(__dirname, './ClientApp/utils'), 33 | 'api': path.resolve(__dirname, './ClientApp/store/api') 34 | } 35 | }, 36 | output: { 37 | path: path.join(__dirname, bundleOutputDir), 38 | filename: '[name].js', 39 | publicPath: '/dist/' 40 | }, 41 | module: { 42 | rules: [ 43 | { test: /\.vue$/, include: /ClientApp/, use: 'vue-loader' }, 44 | { test: /\.js$/, include: /ClientApp/, use: 'babel-loader' }, 45 | { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : [MiniCssExtractPlugin.loader, 'css-loader'] }, 46 | { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' } 47 | ] 48 | }, 49 | plugins: [ 50 | new VueLoaderPlugin(), 51 | new webpack.DllReferencePlugin({ 52 | context: __dirname, 53 | manifest: require('./wwwroot/dist/vendor-manifest.json') 54 | }) 55 | ].concat(isDevBuild ? [ 56 | // Plugins that apply in development builds only 57 | new webpack.SourceMapDevToolPlugin({ 58 | filename: '[file].map', // Remove this line if you prefer inline source maps 59 | moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk 60 | }) 61 | ] : [ 62 | extractCSS, 63 | // Compress extracted CSS. 64 | new OptimizeCSSPlugin({ 65 | cssProcessorOptions: { 66 | safe: true 67 | } 68 | }) 69 | ]) 70 | }] 71 | } 72 | -------------------------------------------------------------------------------- /content/ClientApp/components/about.vue: -------------------------------------------------------------------------------- 1 | 50 | 51 | 58 | 59 | 62 | -------------------------------------------------------------------------------- /content/ClientApp/css/site.css: -------------------------------------------------------------------------------- 1 | /* This file should be reviewed. It's not optimal, but it works for now. */ 2 | .navbar { 3 | display: list-item; 4 | background: #1e0e40; 5 | } 6 | 7 | .dark { color: #1e0e40; } 8 | .fuscia { color: #e91e63; } 9 | 10 | .dark-bg { background: #1e0e40; } 11 | 12 | .btn-primary { background: #e91e63; border: 1px #e91e63 solid;} 13 | .btn-primary:hover { background: #1e0e40; border: 1px #1e0e40 solid;} 14 | 15 | .page-item.active .page-link { 16 | background: #e91e63; 17 | border-color: #e91e63; 18 | } 19 | 20 | .page-link:focus { 21 | box-shadow: 0 0 0 0.2rem #e9e9e9; 22 | } 23 | 24 | a, .page-link, .page-link:hover { 25 | color: #e91e63; 26 | } 27 | a:hover { 28 | color: #1e0e40; 29 | } 30 | 31 | /* Highlighting rules for nav menu items */ 32 | li.nav-item { 33 | margin: 1rem 0 0 0; 34 | } 35 | .nav-item a { 36 | display: inline-block; 37 | padding: 2rem; 38 | } 39 | .nav-item a.active, 40 | .nav-item a.active:hover, 41 | .nav-item a.active:focus { 42 | background-color: #e91e63; 43 | color: white; 44 | text-decoration: underline; 45 | } 46 | 47 | .nav-item a, 48 | .nav-item a:hover, 49 | .nav-item a:focus { 50 | color: white; 51 | } 52 | 53 | /* Keep the nav menu independent of scrolling and on top of other items */ 54 | .main-nav { 55 | position: fixed; 56 | top: 0; 57 | left: 0; 58 | right: 0; 59 | z-index: 1; 60 | } 61 | 62 | .menu-icon { 63 | min-width: 30px; 64 | } 65 | 66 | .trilon-logo { 67 | max-width: 600px; 68 | height: auto; 69 | } 70 | .trilon-mini { 71 | max-width: 300px; 72 | height: auto; 73 | } 74 | 75 | @media (max-width: 767px) { 76 | /* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */ 77 | body { 78 | padding-top: 50px; 79 | } 80 | } 81 | 82 | @media (min-width: 768px) { 83 | /* On small screens, convert the nav menu to a vertical sidebar */ 84 | .main-nav { 85 | height: 100%; 86 | width: calc(25% - 20px); 87 | } 88 | .main-nav .navbar { 89 | border-radius: 0px; 90 | border-width: 0px; 91 | height: 100%; 92 | } 93 | .navbar-expand-md .navbar-nav { 94 | flex-direction: column; 95 | } 96 | .navbar-header { 97 | float: none; 98 | } 99 | .navbar-collapse { 100 | border-top: 1px solid #444; 101 | padding: 0px; 102 | } 103 | .navbar-collapse ul { 104 | float: none; 105 | } 106 | .nav-item { 107 | float: none; 108 | font-size: 15px; 109 | margin: 6px; 110 | } 111 | .nav-item a { 112 | padding: 10px 16px; 113 | border-radius: 4px; 114 | color: white; 115 | } 116 | 117 | .navbar a { 118 | 119 | /* If a menu item's text is too long, truncate it */ 120 | width: 95%; /* Bug to fix here. Width 100% overflow. */ 121 | white-space: nowrap; 122 | /* overflow: hidden; */ 123 | text-overflow: ellipsis; 124 | } 125 | } 126 | -------------------------------------------------------------------------------- /content/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aspnetcore-vuejs", 3 | "description": "ASP.NET Core & VueJS Starter project - Brought to you by Trilon.io", 4 | "author": { 5 | "name": "Mark Pieszak | Trilon Consulting", 6 | "email": "hello@trilon.io", 7 | "url": "https://trilon.io" 8 | }, 9 | "repository": { 10 | "url": "https://github.com/TrilonIO/aspnetcore-Vue-starter" 11 | }, 12 | "license": "MIT", 13 | "scripts": { 14 | "dev": "cross-env ASPNETCORE_ENVIRONMENT=Development NODE_ENV=development dotnet run", 15 | "build": "npm run build-vendor:prod && npm run build:prod", 16 | "build:prod": "cross-env NODE_ENV=production webpack --progress --hide-modules", 17 | "build-vendor:prod": "cross-env NODE_ENV=production webpack --config webpack.config.vendor.js --progress", 18 | "build-vendor:dev": "cross-env NODE_ENV=development webpack --config webpack.config.vendor.js --progress", 19 | "lint": "eslint -c ./.eslintrc.js ClientApp/**/*.js ClientApp/**/*.vue ClientApp/**/*.json webpack*.js", 20 | "install": "npm run build-vendor:dev", 21 | "update-packages": "npx npm-check -u" 22 | }, 23 | "dependencies": { 24 | "axios": "^0.18.0", 25 | "core-js": "^2.5.3", 26 | "vue": "^2.6.10", 27 | "vue-router": "^3.0.3", 28 | "vue-server-renderer": "^2.6.10", 29 | "vue-template-compiler": "^2.6.10", 30 | "vuex": "^3.1.0", 31 | "vuex-router-sync": "^5.0.0" 32 | }, 33 | "devDependencies": { 34 | "@babel/core": "^7.2.2", 35 | "@babel/plugin-proposal-class-properties": "^7.0.0", 36 | "@babel/plugin-proposal-decorators": "^7.0.0", 37 | "@babel/plugin-proposal-export-namespace-from": "^7.0.0", 38 | "@babel/plugin-proposal-function-sent": "^7.0.0", 39 | "@babel/plugin-proposal-json-strings": "^7.0.0", 40 | "@babel/plugin-proposal-numeric-separator": "^7.0.0", 41 | "@babel/plugin-proposal-throw-expressions": "^7.0.0", 42 | "@babel/plugin-syntax-dynamic-import": "^7.0.0", 43 | "@babel/plugin-syntax-import-meta": "^7.0.0", 44 | "@babel/plugin-transform-async-to-generator": "^7.0.0", 45 | "@babel/plugin-transform-runtime": "^7.0.0", 46 | "@babel/preset-env": "^7.0.0", 47 | "@babel/register": "^7.0.0", 48 | "@babel/runtime": "^7.3.1", 49 | "@fortawesome/fontawesome-svg-core": "^1.2.13", 50 | "@fortawesome/free-brands-svg-icons": "^5.7.0", 51 | "@fortawesome/free-solid-svg-icons": "^5.7.0", 52 | "@fortawesome/vue-fontawesome": "^0.1.5", 53 | "aspnet-webpack": "^3.0.0", 54 | "babel-eslint": "^10.0.1", 55 | "babel-loader": "^8.0.5", 56 | "bootstrap": "^4.0.0", 57 | "cross-env": "^5.2.0", 58 | "css-loader": "^2.1.0", 59 | "eslint": "^5.12.1", 60 | "eslint-config-standard": "^12.0.0", 61 | "eslint-plugin-html": "^5.0.0", 62 | "eslint-plugin-import": "^2.9.0", 63 | "eslint-plugin-node": "^8.0.1", 64 | "eslint-plugin-promise": "^4.0.1", 65 | "eslint-plugin-standard": "^4.0.0", 66 | "event-source-polyfill": "^1.0.5", 67 | "file-loader": "^3.0.1", 68 | "font-awesome": "^4.7.0", 69 | "jquery": "^3.3.1", 70 | "mini-css-extract-plugin": "^0.5.0", 71 | "node-sass": "^4.8.2", 72 | "optimize-css-assets-webpack-plugin": "^5.0.1", 73 | "popper.js": "^1.14.1", 74 | "sass-loader": "^7.1.0", 75 | "style-loader": "^0.23.1", 76 | "url-loader": "^1.1.2", 77 | "vue-loader": "^15.6.2", 78 | "webpack": "^4.29.0", 79 | "webpack-cli": "^3.2.1", 80 | "webpack-dev-server": "^3.1.14", 81 | "webpack-hot-middleware": "^2.21.2" 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at hello@trilon.io. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /content/ClientApp/components/fetch-data.vue: -------------------------------------------------------------------------------- 1 | 47 | 48 | 98 | 99 | 101 | -------------------------------------------------------------------------------- /content/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | 5 | /Properties/launchSettings.json 6 | 7 | package-lock.json 8 | 9 | ## Ignore Visual Studio temporary files, build results, and 10 | ## files generated by popular Visual Studio add-ons. 11 | 12 | # User-specific files 13 | *.suo 14 | *.user 15 | *.userosscache 16 | *.sln.docstates 17 | 18 | # User-specific files (MonoDevelop/Xamarin Studio) 19 | *.userprefs 20 | 21 | # Build results 22 | [Dd]ebug/ 23 | [Dd]ebugPublic/ 24 | [Rr]elease/ 25 | [Rr]eleases/ 26 | x64/ 27 | x86/ 28 | build/ 29 | bld/ 30 | bin/ 31 | Bin/ 32 | obj/ 33 | Obj/ 34 | 35 | # Visual Studio 2015 cache/options directory 36 | .vs/ 37 | /wwwroot/dist/** 38 | 39 | # Workaround for https://github.com/aspnet/JavaScriptServices/issues/235 40 | !/wwwroot/dist/_placeholder.txt 41 | 42 | /yarn.lock 43 | 44 | # MSTest test Results 45 | [Tt]est[Rr]esult*/ 46 | [Bb]uild[Ll]og.* 47 | 48 | # NUNIT 49 | *.VisualState.xml 50 | TestResult.xml 51 | 52 | # Build Results of an ATL Project 53 | [Dd]ebugPS/ 54 | [Rr]eleasePS/ 55 | dlldata.c 56 | 57 | # DNX 58 | project.lock.json 59 | artifacts/ 60 | 61 | *_i.c 62 | *_p.c 63 | *_i.h 64 | *.ilk 65 | *.meta 66 | *.obj 67 | *.pch 68 | *.pdb 69 | *.pgc 70 | *.pgd 71 | *.rsp 72 | *.sbr 73 | *.tlb 74 | *.tli 75 | *.tlh 76 | *.tmp 77 | *.tmp_proj 78 | *.log 79 | *.vspscc 80 | *.vssscc 81 | .builds 82 | *.pidb 83 | *.svclog 84 | *.scc 85 | 86 | # Chutzpah Test files 87 | _Chutzpah* 88 | 89 | # Visual C++ cache files 90 | ipch/ 91 | *.aps 92 | *.ncb 93 | *.opendb 94 | *.opensdf 95 | *.sdf 96 | *.cachefile 97 | 98 | # Visual Studio profiler 99 | *.psess 100 | *.vsp 101 | *.vspx 102 | *.sap 103 | 104 | # TFS 2012 Local Workspace 105 | $tf/ 106 | 107 | # Guidance Automation Toolkit 108 | *.gpState 109 | 110 | # ReSharper is a .NET coding add-in 111 | _ReSharper*/ 112 | *.[Rr]e[Ss]harper 113 | *.DotSettings.user 114 | 115 | # JustCode is a .NET coding add-in 116 | .JustCode 117 | 118 | # TeamCity is a build add-in 119 | _TeamCity* 120 | 121 | # DotCover is a Code Coverage Tool 122 | *.dotCover 123 | 124 | # NCrunch 125 | _NCrunch_* 126 | .*crunch*.local.xml 127 | nCrunchTemp_* 128 | 129 | # MightyMoose 130 | *.mm.* 131 | AutoTest.Net/ 132 | 133 | # Web workbench (sass) 134 | .sass-cache/ 135 | 136 | # Installshield output folder 137 | [Ee]xpress/ 138 | 139 | # DocProject is a documentation generator add-in 140 | DocProject/buildhelp/ 141 | DocProject/Help/*.HxT 142 | DocProject/Help/*.HxC 143 | DocProject/Help/*.hhc 144 | DocProject/Help/*.hhk 145 | DocProject/Help/*.hhp 146 | DocProject/Help/Html2 147 | DocProject/Help/html 148 | 149 | # Click-Once directory 150 | publish/ 151 | 152 | # Publish Web Output 153 | *.[Pp]ublish.xml 154 | *.azurePubxml 155 | # TODO: Comment the next line if you want to checkin your web deploy settings 156 | # but database connection strings (with potential passwords) will be unencrypted 157 | *.pubxml 158 | *.publishproj 159 | 160 | # NuGet Packages 161 | *.nupkg 162 | # The packages folder can be ignored because of Package Restore 163 | **/packages/* 164 | # except build/, which is used as an MSBuild target. 165 | !**/packages/build/ 166 | # Uncomment if necessary however generally it will be regenerated when needed 167 | #!**/packages/repositories.config 168 | 169 | # Microsoft Azure Build Output 170 | csx/ 171 | *.build.csdef 172 | 173 | # Microsoft Azure Emulator 174 | ecf/ 175 | rcf/ 176 | 177 | # Microsoft Azure ApplicationInsights config file 178 | ApplicationInsights.config 179 | 180 | # Windows Store app package directory 181 | AppPackages/ 182 | BundleArtifacts/ 183 | 184 | # Visual Studio cache files 185 | # files ending in .cache can be ignored 186 | *.[Cc]ache 187 | # but keep track of directories ending in .cache 188 | !*.[Cc]ache/ 189 | 190 | # Others 191 | ClientBin/ 192 | ~$* 193 | *~ 194 | *.dbmdl 195 | *.dbproj.schemaview 196 | *.pfx 197 | *.publishsettings 198 | orleans.codegen.cs 199 | 200 | # Workaround for https://github.com/aspnet/JavaScriptServices/issues/235 201 | /node_modules/** 202 | !/node_modules/_placeholder.txt 203 | 204 | # RIA/Silverlight projects 205 | Generated_Code/ 206 | 207 | # Backup & report files from converting an old project file 208 | # to a newer Visual Studio version. Backup files are not needed, 209 | # because we have git ;-) 210 | _UpgradeReport_Files/ 211 | Backup*/ 212 | UpgradeLog*.XML 213 | UpgradeLog*.htm 214 | 215 | # SQL Server files 216 | *.mdf 217 | *.ldf 218 | 219 | # Business Intelligence projects 220 | *.rdl.data 221 | *.bim.layout 222 | *.bim_*.settings 223 | 224 | # Microsoft Fakes 225 | FakesAssemblies/ 226 | 227 | # GhostDoc plugin setting file 228 | *.GhostDoc.xml 229 | 230 | # Node.js Tools for Visual Studio 231 | .ntvs_analysis.dat 232 | 233 | # Visual Studio 6 build log 234 | *.plg 235 | 236 | # Visual Studio 6 workspace options file 237 | *.opt 238 | 239 | # Visual Studio LightSwitch build output 240 | **/*.HTMLClient/GeneratedArtifacts 241 | **/*.DesktopClient/GeneratedArtifacts 242 | **/*.DesktopClient/ModelManifest.xml 243 | **/*.Server/GeneratedArtifacts 244 | **/*.Server/ModelManifest.xml 245 | _Pvt_Extensions 246 | 247 | # Paket dependency manager 248 | .paket/paket.exe 249 | 250 | # FAKE - F# Make 251 | .fake/ 252 | 253 | .vscode/ 254 | -------------------------------------------------------------------------------- /content/README.md: -------------------------------------------------------------------------------- 1 | # ASP.NET Core & Vue.js Starter 2 | 3 | Starter Template for ASP.NET Core and Vue.JS (Vue) - with Webpack (with HMR), Web API, Vuex state manangement and other best-practices baked in! 4 | 5 | > Written in ES6, TypeScript version coming soon! 6 | 7 | [![Nuget](https://img.shields.io/nuget/v/aspnetcore-vuejs.svg?style=for-the-badge&color=5b1096)](https://www.nuget.org/packages/aspnetcore-vuejs/) 8 | [![Nuget Downloads](https://img.shields.io/nuget/dt/aspnetcore-vuejs.svg?label=Nuget%20Downloads&style=for-the-badge&color=b31ae7)](https://www.nuget.org/packages/aspnetcore-vuejs/) 9 | [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge&color=e51384)](/LICENSE) 10 | 11 | --- 12 | 13 | [![Trilon Consulting](https://trilon.io/trilon-logo-clear.png)](https://trilon.io) 14 | 15 | 16 | ### Made with love by [Trilon.io](https://trilon.io) 17 | 18 | --- 19 | 20 | # Features 21 | 22 | - **ASP.NET Core 2.2** 23 | - Web API 24 | - **VueJS 2** 25 | - Vuex (State Store) 26 | - **Webpack** 27 | - HMR (Hot Module Replacement/Reloading) 28 | - **Bootstrap 4** 29 | 30 | # Prerequisites: 31 | * [.Net Core 2.2](https://www.microsoft.com/net/download/windows) 32 | * [NodeJS](https://nodejs.org/) >= 10.x 33 | * [VSCode](https://code.visualstudio.com/) (ideally), or VS2017 34 | 35 | # Installation: 36 | 37 | ### Nuget | Dotnet Templates 38 | 39 | Find the template through NuGet package manager inside Visual Studio or [here](https://www.nuget.org/packages/aspnetcore-vuejs) 40 | 41 | > Or download it via dotnet templates 42 | 43 | ```ts 44 | // Make a directory where you want the project 45 | mkdir my-vue-starter && cd my-vue-starter 46 | 47 | // Download the dotnet template 48 | dotnet new -i aspnetcore-vuejs 49 | 50 | // Run and install the template 51 | dotnet new vuejs 52 | 53 | // Make sure you install the dependencies 54 | npm install 55 | ``` 56 | 57 | Now you can open the project via Visual Studio or VSCode, press F5 to run the application! 58 | 59 | Note: 60 | 61 | * This will automatically run `dotnet restore` unless you install with `dotnet new vuejs --skipRestore` 62 | * ([Official documentation](https://docs.microsoft.com/en-us/dotnet/core/tools/dotnet-new?tabs=netcore2x)) 63 | * This will automatically run `dotnet restore` unless you install with `dotnet new vuejs --skipRestore` 64 | 65 | ### -OR- Clone this Repo itself 66 | 67 | * Clone this repository : `$ git clone https://github.com/MarkPieszak/aspnetcore-Vue-starter.git VueWeb` 68 | * `$ cd VueWeb/content` 69 | * `$ dotnet restore && npm install` 70 | * (If using VSCode) `$ code .` 71 | * (If using Visual Studio) Open the `*.sln` file with "Open project" from Visual Studio IDE 72 | 73 | 74 | ## Start the application: 75 | You have two choices when it come at how your preffer to run it. You can either use the command line or the build-in run command. 76 | 77 | ### 1. Using the command line 78 | Run the application using `dotnet run` or `npm run dev` 79 | - note `dotnet run` should be run in `Development` environment for hot reloading. This setting can be set either within the command line or via the `launchSettings.json` available in the `Properties` folder. 80 | 81 | ### 2. Using the built-in run command 82 | Run the application in VSCode or Visual Studio 2017 by hitting `F5`. 83 | 84 | ## View your application running 85 | When running the app using debug menu or `F5` VS open auto the app in the browser; 86 | 87 | ---- 88 | 89 | # Demo of Application Running 90 | 91 | ![](./repo-example.png) 92 | 93 | --- 94 | 95 | # Recommended plugin for debugging VueJS 96 | 97 | - Get Chrome DevTools for VueJS [here](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) 98 | 99 | --- 100 | 101 | # Found a Bug? Want to Contribute? 102 | 103 | Nothing's ever perfect, but please let me know by creating an issue (make sure there isn't an existing one about it already), and we'll try and work out a fix for it! If you have any good ideas, or want to contribute, feel free to either make an Issue with the Proposal, or just make a PR from your Fork. 104 | Please note that this project is released with a [Contributor Covenant Code of Conduct](CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms. 105 | 106 | --- 107 | 108 | _Looking for ASP.NET Core & Angular 7.x+ Universal starter? [click here](https://github.com/TrilonIO/aspnetcore-angular-universal)_ 109 | 110 | ---- 111 | 112 | # License 113 | 114 | [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge&color=e51384)](/LICENSE) 115 | 116 | Copyright (c) 2016-2019 [Mark Pieszak](https://github.com/MarkPieszak) 117 | 118 | [![Twitter Follow](https://img.shields.io/twitter/follow/MarkPieszak.svg?style=social)](https://twitter.com/MarkPieszak) 119 | 120 | ---- 121 | 122 | # Trilon - Vue, Asp.NET, NodeJS - Consulting | Training | Development 123 | 124 | Check out **[Trilon.io](https://Trilon.io)** for more info! 125 | 126 | Contact us at **hello@trilon.io**, and let's talk about your projects needs. 127 | 128 | [![Trilon Consulting](https://trilon.io/trilon-logo-clear.png)](https://trilon.io) 129 | 130 | 131 | ## Follow Trilon online: 132 | 133 | Twitter: [@Trilon_io](http://twitter.com/Trilon_io) 134 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ASP.NET Core & Vue.js Starter 2 | 3 | Starter Template for ASP.NET Core and Vue.JS (Vue) - with Webpack (with HMR), Web API, Vuex state manangement and other best-practices baked in! 4 | 5 | > Written in ES6, TypeScript version coming soon! 6 | 7 | [![Nuget](https://img.shields.io/nuget/v/aspnetcore-vuejs.svg?style=for-the-badge&color=5b1096)](https://www.nuget.org/packages/aspnetcore-vuejs/) 8 | [![Nuget Downloads](https://img.shields.io/nuget/dt/aspnetcore-vuejs.svg?label=Nuget%20Downloads&style=for-the-badge&color=b31ae7)](https://www.nuget.org/packages/aspnetcore-vuejs/) 9 | [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge&color=e51384)](/LICENSE) 10 | 11 | --- 12 | 13 |
14 |

15 | 16 | Trilon.io - Angular Universal, NestJS, JavaScript Application Consulting Development and Training 17 | 18 |

19 | 20 | 21 |

Made with :heart: by Trilon.io

22 | 23 | --- 24 | 25 | 26 | # Table of Contents 27 | 28 | * [Features](#features) 29 | * [Prerequisites](#prerequisites) 30 | * [Installation](#installation) 31 | * [Extras](#recommended-plugin-for-debugging-vuejs) 32 | * [License](#license) 33 | * [Trilon - VueJS & Asp.NET Consulting & Training](#trilon---vue-aspnet-nodejs---consulting--training--development) 34 | 35 | # Features 36 | 37 | - **ASP.NET Core 2.2** 38 | - Web API 39 | - **VueJS 2** 40 | - Vuex (State Store) 41 | - **Webpack** 42 | - HMR (Hot Module Replacement/Reloading) 43 | - **Bootstrap 4** 44 | 45 | # Prerequisites: 46 | * [.Net Core 2.2](https://www.microsoft.com/net/download/windows) 47 | * [NodeJS](https://nodejs.org/) >= 10.x 48 | * [VSCode](https://code.visualstudio.com/) (ideally), or VS2017 49 | 50 | # Installation: 51 | 52 | ### Nuget | Dotnet Templates 53 | 54 | Find the template through NuGet package manager inside Visual Studio or [here](https://www.nuget.org/packages/aspnetcore-vuejs) 55 | 56 | > Or download it via dotnet templates 57 | 58 | ```ts 59 | // Make a directory where you want the project 60 | mkdir my-vue-starter && cd my-vue-starter 61 | 62 | // Download the dotnet template 63 | dotnet new -i aspnetcore-vuejs 64 | 65 | // Run and install the template 66 | dotnet new vuejs 67 | 68 | // Make sure you install the dependencies 69 | npm install 70 | ``` 71 | 72 | Now you can open the project via Visual Studio or VSCode, press F5 to run the application! 73 | 74 | Note: 75 | 76 | * This will automatically run `dotnet restore` unless you install with `dotnet new vuejs --skipRestore` 77 | * ([Official documentation](https://docs.microsoft.com/en-us/dotnet/core/tools/dotnet-new?tabs=netcore2x)) 78 | * This will automatically run `dotnet restore` unless you install with `dotnet new vuejs --skipRestore` 79 | 80 | ### -OR- Clone this Repo itself 81 | 82 | * Clone this repository : `$ git clone https://github.com/MarkPieszak/aspnetcore-Vue-starter.git VueWeb` 83 | * `$ cd VueWeb/content` 84 | * `$ dotnet restore && npm install` 85 | * (If using VSCode) `$ code .` 86 | * (If using Visual Studio) Open the `*.sln` file with "Open project" from Visual Studio IDE 87 | 88 | 89 | ## Start the application: 90 | You have two choices when it come at how your preffer to run it. You can either use the command line or the build-in run command. 91 | 92 | ### 1. Using the command line 93 | Run the application using `npm run dev`. 94 | 95 | ### 2. Using the built-in run command 96 | Run the application in VSCode or Visual Studio 2017 by hitting `F5`. 97 | 98 | ## View your application running 99 | When running the app using debug menu or `F5` VS open auto the app in the browser; 100 | 101 | ---- 102 | 103 | # Demo of Application Running 104 | 105 | ![](./content/repo-example.png) 106 | 107 | --- 108 | 109 | # Recommended plugin for debugging VueJS 110 | 111 | - Get Chrome DevTools for VueJS [here](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) 112 | 113 | --- 114 | 115 | # Found a Bug? Want to Contribute? 116 | 117 | Nothing's ever perfect, but please let me know by creating an issue (make sure there isn't an existing one about it already), and we'll try and work out a fix for it! If you have any good ideas, or want to contribute, feel free to either make an Issue with the Proposal, or just make a PR from your Fork. 118 | Please note that this project is released with a [Contributor Covenant Code of Conduct](CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms. 119 | 120 | --- 121 | 122 | _Looking for ASP.NET Core & Angular 7.x+ Universal starter? [click here](https://github.com/TrilonIO/aspnetcore-angular-universal)_ 123 | 124 | ---- 125 | 126 | # License 127 | 128 | [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge&color=e51384)](/LICENSE) 129 | 130 | Copyright (c) 2016-2019 [Mark Pieszak](https://github.com/MarkPieszak) 131 | 132 | [![Twitter Follow](https://img.shields.io/twitter/follow/MarkPieszak.svg?style=social)](https://twitter.com/MarkPieszak) 133 | 134 | ---- 135 | 136 | # Trilon - Vue, Asp.NET, NodeJS - Consulting | Training | Development 137 | 138 | Check out **[Trilon.io](https://Trilon.io)** for more info! 139 | 140 | Contact us at , and let's talk about your projects needs. 141 | 142 |

143 | 144 | Trilon.io - Angular Universal, NestJS, JavaScript Application Consulting Development and Training 145 | 146 |

147 | 148 | ## Follow Trilon online: 149 | 150 | Twitter: [@Trilon_io](http://twitter.com/Trilon_io) 151 | --------------------------------------------------------------------------------