*NEW* Asp.net Core & Vue.js (ES6) SPA Starter kit - Vuex, webpack, Web API, Docker, and more! By @TrilonIO

Overview

ASP.NET Core & Vue.js Starter

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!

Written in ES6, TypeScript version coming soon!

Nuget Nuget Downloads MIT License



Trilon.io - Angular Universal, NestJS, JavaScript Application Consulting Development and Training

Made with ❤️ by Trilon.io


Table of Contents

Features

  • ASP.NET Core 2.2
    • Web API
  • VueJS 2
    • Vuex (State Store)
  • Webpack
    • HMR (Hot Module Replacement/Reloading)
  • Bootstrap 4

Prerequisites:

Installation:

Nuget | Dotnet Templates

Find the template through NuGet package manager inside Visual Studio or here

Or download it via dotnet templates

// Make a directory where you want the project
mkdir my-vue-starter && cd my-vue-starter

// Download the dotnet template
dotnet new -i aspnetcore-vuejs

// Run and install the template
dotnet new vuejs

// Make sure you install the dependencies
npm install

Now you can open the project via Visual Studio or VSCode, press F5 to run the application!

Note:

  • This will automatically run dotnet restore unless you install with dotnet new vuejs --skipRestore
  • (Official documentation)
    • This will automatically run dotnet restore unless you install with dotnet new vuejs --skipRestore

-OR- Clone this Repo itself

  • Clone this repository : $ git clone https://github.com/MarkPieszak/aspnetcore-Vue-starter.git VueWeb
  • $ cd VueWeb/content
  • $ dotnet restore && npm install
  • (If using VSCode) $ code .
  • (If using Visual Studio) Open the *.sln file with "Open project" from Visual Studio IDE

Start the application:

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.

1. Using the command line

Run the application using npm run dev.

2. Using the built-in run command

Run the application in VSCode or Visual Studio 2017 by hitting F5.

View your application running

When running the app using debug menu or F5 VS open auto the app in the browser;


Demo of Application Running


Recommended plugin for debugging VueJS

  • Get Chrome DevTools for VueJS here

Found a Bug? Want to Contribute?

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. Please note that this project is released with a Contributor Covenant Code of Conduct. By participating in this project you agree to abide by its terms.


Looking for ASP.NET Core & Angular 7.x+ Universal starter? click here


License

MIT License

Copyright (c) 2016-2019 Mark Pieszak

Twitter Follow


Trilon - Vue, Asp.NET, NodeJS - Consulting | Training | Development

Check out Trilon.io for more info!

Contact us at [email protected], and let's talk about your projects needs.

Trilon.io - Angular Universal, NestJS, JavaScript Application Consulting Development and Training

Follow Trilon online:

Twitter: @Trilon_io

Issues
  • Vue.js helpers in cshtml?

    Vue.js helpers in cshtml?

    Is it not possible to integrate Vue.js into a MVC project in a way, such that you can use all the Vue.js features directly in a .cshtml view? Or do you have to load it in with a template?

    opened by binaryPUNCH 13
  • Great start - DataFromController  and HMR

    Great start - DataFromController and HMR

    You controller returns DataFromController, but it is never used. Was interested in how you were going to make that happen.

    There is another example of this at https://github.com/ligershark/CoreTemplatePack

    opened by waynebrantley 11
  • make available through 'dotnet new'

    make available through 'dotnet new'

    make this template usable with 'dotnet new'. like the other starter templates. what needs to be done to have this capability?

    image

    https://blogs.msdn.microsoft.com/dotnet/2017/04/02/how-to-create-your-own-templates-for-dotnet-new/

    enhancement 
    opened by vip32 10
  • error running `dotnet new --install Microsoft.AspNetCore.SpaTemplates.Vue2Js`

    error running `dotnet new --install Microsoft.AspNetCore.SpaTemplates.Vue2Js`

    Hi,

    I tried: dotnet new --install Microsoft.AspNetCore.SpaTemplates.Vue2Js

    got:

    Error: Package "Microsoft.AspNetCore.SpaTemplates.Vue2Js" is not a valid package specification

    Please are there any prerequisites needed?

    enhancement 
    opened by CharlesOkwuagwu 10
  • Running Vue in development mode

    Running Vue in development mode

    I'm encountering a very odd message after deploying, You are running Vue in development mode.

    You can see my deployed site at http://vuejs-dotnet.gear.host/

    I see you already have defined the plugin necessary to indicate production mode in the webpack.config.vendor.js file. Do you know what is going on? I can't seem to get rid of this message in production, all files have been minified and optimized, your help would be appreciated.

    Needs Investigation 
    opened by navarrorc 9
  • Update to TypeScript

    Update to TypeScript

    enhancement 
    opened by MarkPieszak 8
  • Error running webpack

    Error running webpack

    After cloning and running yarn I am getting this error when running webpack:

    Error: Cannot find module './wwwroot/dist/vendor-manifest.json'
        at Function.Module._resolveFilename (module.js:470:15)
        at Function.Module._load (module.js:418:25)
        at Module.require (module.js:498:17)
        at require (internal/module.js:20:19)
        at module.exports (C:\Users\..\webpack.config.js:40:27)
        at requireConfig (C:\Users\..\AppData\Roaming\npm\node_modules\webpack\bin\convert-argv.js:102:15)
        at C:\Users\..\AppData\Roaming\npm\node_modules\webpack\bin\convert-argv.js:109:17
        at Array.forEach (native)
        at module.exports (C:\Users\..\AppData\Roaming\npm\node_modules\webpack\bin\convert-argv.js:107:15)
        at Object.<anonymous> (C:\Users\..\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:153:40)
    
    opened by stibay 8
  • Hot Module Reload doesn't seem to work

    Hot Module Reload doesn't seem to work

    I just downloaded the repository, ran it, website came up fine, but any changes to files doesn't seem to update the website.

    If I refresh the page, then the change appears

    in the javascript console in chromeI have

    EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.

    Which keeps counting up.

    ( Using Visual Studio 2017 15.3.2 )

    bug 
    opened by keithn 8
  • dotnet new template

    dotnet new template

    I've generated the dotnet new template of the current repo. (re #28)

    • The whole repo had to be put into a /contents dir
    • a .template.config dir was created with the template.json file which configures the dotnet new template
    • changed the title on the menu as the template string replace changes it to the project name
    • a nuspec file was added to generate the nuget

    I've also uploaded a nuget at https://www.nuget.org/packages/aspnetcore-vuejs/1.0.0 (the ownership can be changed if you decide you like this)

    This can be tested via dotnet new -i aspnetcore-vuejs

    opened by mika76 8
  • dotnet new is not installing the latest version of this starter project referencing aspnet core 2.1

    dotnet new is not installing the latest version of this starter project referencing aspnet core 2.1

    per your readme, I ran this command to install this template: dotnet new -i aspnetcore-vuejs

    when i created a new template from that, i noticed that the aspnet core version was still 2.0.3 and not 2.1.x. Did you deploy any of the latest changes so the dotnet new command pulls the newer version.

    This is what dotnet new installed Installing aspnetcore-vuejs 1.0.1.

    thoughts?

    Nuget Published - Awaiting Validation 
    opened by kirk-quinbar 6
  • How to run build deploy product?

    How to run build deploy product?

    opened by TrietPham96 1
  • Migration from ASP.NET Core 2.2 to 3.0,

    Migration from ASP.NET Core 2.2 to 3.0,

    adaptation of the project for asp core 3.0 with hot reload by Westwind.AspnetCore.LiveReload,because hot reload from asp core 2.2 stopped working

    opened by UseMuse 3
  • Please Upgrade to Core 3

    Please Upgrade to Core 3

    I am attempting to upgrade my app to Core 3 and am running into this issue.

    opened by Grandizer 19
  • Lint error when there is no json

    Lint error when there is no json

    When using current lint settings in packages.json, eslint fails if there is no json file inside ClientApp folder. Correct way would be:

    "lint": "eslint -c ./.eslintrc.js \"ClientApp/**/*.{js,vue,json}\" webpack*.js",
    
    opened by poganytamas 0
  • Webpack Javascript Versioning

    Webpack Javascript Versioning

    How can I use HtmlWebpackPlugin to have a new version of HTML and read all assets with hash in their name?

    opened by FF128 0
  • QUESTION: Will you upgrade this repo to similarity with https://github.com/TrilonIO/aspnetcore-angular-universal ?

    QUESTION: Will you upgrade this repo to similarity with https://github.com/TrilonIO/aspnetcore-angular-universal ?

    Hi Mark,

    I love this repo. I have a question for you. Will you upgrade this repo to have TypeScript capability? and the other features such as SignalR etc that image has?

    cheers

    opened by nigel-dewar 1
  • Dev dependency vs dependency

    Dev dependency vs dependency

    Why are fontawesome,bootstrap, jquery, etc dev dependencies and not dependencies in package.json? Aren't they all client side dependencies? What am I missing here?

    opened by dem0nbruce 1
  • site.css 404 not found for published application

    site.css 404 not found for published application

    Hello,

    Line 14 of the webpack.config.js publishes the css as style.css. However the webapp expects site.css. To fix this I had to fix line 14 to publish the .css as site.css.

    bug 
    opened by brian-pickens-web 4
  • Blank Page on start up

    Blank Page on start up

    Just to expand upon bug #91

    I have tried npm run build, npm installand it does not matter, every time that I attempt to start the Application in .NET Core it will fail to load, main js, vendor css, and vendor js.

    I think that the starter app is fantastic considering that there are not a lot of other vue spa resources out there for .NET Core, but this makes it very difficult to work with when everytime you run the app it fails.

    Is there any solution to this?

    I have attached a picture of when i do an npm install Capture

    Here is a pic of what it looks like when an npm run build is run Capture2

    Needs Investigation 
    opened by rcreynolds53 6
  • Webpack Configuration Issue

    Webpack Configuration Issue

    Hello, I've successfully created new projects from this template in the past. I just tried creating a new project again, and without any changes whatsoever, just trying to run according to the documentation - I'm getting this issue:

    `System.AggregateException: One or more errors occurred. (WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

    • configuration has an unknown property 'mode'. These properties are valid: object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }`

    Any suggestions? Thank you for a great template!

    opened by mirikerstein 1
Releases(1.0.9)
Owner
Trilon
Consulting | Development | Training | Open-Source - Your Full-Stack Development Partner, helping you take your application to the next-level
Trilon
ASP.NET Core + Vue.js starter project

ASP.NET Core Vue Starter The repository contains an ASP.NET Core + Vue.js starter template. The template runs on ASP.NET Core 5.0 and is created by Vu

Software Ateliers 458 Jun 3, 2021
A fully explained and fully documented Vue + Tailwind setup using webpack, without magic behind the scenes

Vue + tailwind + webpack boilerplate This boilerplate provides the a simple setup needed to create development and production environments to create V

Eric Mourin 30 Jun 2, 2021
Project starter for Vue Typescript and Webpack

Vue-webpack-typescript project starter This project is generated via vue-webpack-minimal and features: Base example of CRUD pages with written api cla

Andrew 15 May 11, 2021
Template AspNetCore with Vue, Vue router, Vuex, TypeScript, Bulma, Sass and Jest

ASP.NET Core 3.1 multi-page Vue.js with TypeScript template The repository contains template using Vue.js, Vuex, Vue router, TypeScript, Bulma and SAS

Danijel Hrček 221 May 9, 2021
Shopify theme development environment using Liquid, Vue and Tailwind CSS 🧪

Shopify Theme Lab Shopify Theme Lab is a customizable modular development environment for blazing-fast Shopify theme creation. By default, it's bundle

UI Crooks 349 Jun 12, 2021
a hilarious peer to peer drawing game built with vue.js using Ably channels.

Depict-It Depict-It is a party game for 4 to 8 players (ideally!) where you mutate a phrase through drawings and captions, to make up funny scenarios

Ably Labs 24 May 20, 2021
NuxtJS boilerplate with JWT authentication

nuxtjs-otp-boilerplate Introduction A project aimed to eliminate several architecture decisions. This boilerplate comes with NuxtJS, ExpressJS, Vuetif

Rei Allen Ramos 23 Mar 5, 2021
A starter template for Vue.js projects

Vue.js starter template A bare-bones starter-template to get your hands dirty with awesome Vue.js library. Built with: Vue.js 2 Vue Router 2 Vue Resou

Mikhail Kuznetcov 10 Jul 18, 2018
:elephant: A Laravel 6 SPA boilerplate with a users CRUD using Vue.js 2.6, GraphQL, Bootstrap 4, TypeScript, Sass, and Pug.

Laravel Vue Boilerplate A Laravel 6 Single Page Application boilerplate using Vue.js 2.6, GraphQL, Bootstrap 4, TypeScript, Sass and Pug with: A users

Alefe Souza 484 May 27, 2021
Simple chart page that uses Element UI, Vue Router and Vue Chart

vue-chart-starter-kit Simple chart page that uses Element UI, Vue Router and Vue Chart Demo Build Setup # install dependencies npm install # serve wi

Captain Pangyo 23 Jul 28, 2020
🤓 This is a simple SPA built using Koa as the backend, Vue as the first frontend, and React as the second frontend. Features MySQL integration, user authentication, CRUD note actions, and Vuex store modules.

Koa-Vue-Notes-Web This is a simple SPA built using Koa as the backend, Vue as the first frontend, and React as the second frontend. Frontend Vue GitHu

John Datserakis 205 Jun 1, 2021
:chart_with_upwards_trend: Feature scoped Vuex modules to have a better organization of business logic code inside Vuex modules based on Large-scale Vuex application structures @3yourmind

vuex-feature-scoped-structure by igeligel A Vue.js/Vuex project showcasing a complex but scalable store structure. This project was created in coopera

Kevin Peters 219 May 29, 2021
NOT MAINTAINED Vue.js with Sails.js example project with many features

NOT MAINTAINED Vue.js with Sails.js example project This project is for those who are new to single-page applications and want to learn through a real

Julian Claus 302 Feb 21, 2021
Example TodoMVC Vue.js app with Vuex store and server backend via REST

vue-vuex-todomvc Simple TodoMVC with Vue.js and Vuex data store. Based on this Vuex tutorial and the basic official TodoMVC vue.js example Read my ste

Gleb Bahmutov 40 Jun 5, 2021