trilonio/aspnetcore-vue-starter

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

aspnetcore-vue-starter's Issues

Adding components to _Layout.cshtml

Is it possible to render a component outside the main app div? Trying it doesn't seem to work and I would like to add a component to my _Layout.cshtml

Clean up / organize directories

Update to VS2017 csproj

Proposal: JwtBearerAuthentication

I added this to my application using your template as a starter, it was very easy following the guidance at: https://fullstackmark.com/post/10/user-authentication-with-angular-and-asp-net-core

I think the template should include this, as everyone is going to need to some sort of client/server authentication in their app. Well nearly everyone...

SSR implementation branch doesn't work when published

This brach, vue ssr implementation, worked in development environment. But it did not work when published, which had no error information, requests even did not hit the kestrel server.

Steps:

1. npm install
2. dotnet restore
3. npm run build
4. dotnet publish -c Realease

Powershell script to rename the project to something different

#JustJust in case anyone needs it...

put the following into something like renameProject.ps1, then put it in the root directory of the project
then just do ./renameProject.ps1 NextBigThing

Note the script will modify itself so you can rename it again if need be.

param(
[string]$projectName
)

$files = Get-ChildItem . *.* -rec -Attributes !D
foreach ($file in $files)
{
    (Get-Content $file.PSPath) |  Foreach-Object { $_ -replace "Vue2Spa", $projectName } |  Set-Content $file.PSPath
}
Rename-Item .\Vue2Spa.csproj $projectName".csproj"
Rename-Item .\Vue2Spa.sln $projectName".sln"

`dotnet restore` not working

Instructions:

1. Clone this repo
2. At the repo's root directory run dotnet restore
   ...

Don't you need a project.json for that? As it stands you'll only get an error message that there's no project to restore.

More info on main.js and vendor.js

@MarkPieszak I just wanted to know the significance of the main.js and vendor.js files. These are huge files and I'm not quite sure what they are doing yet, adding an explanation to the wiki or readme would be awesome.

Production build/Publish/webpack.config.vendor.js

Hello,

when trying to publish this project I get the usual "Unexpected token: name (b) [vendor.js:20623,5]" from UglifyJS indicating that it wasn't translated to es2015.

So I copied the content of webpack.config.js to webpack.config.vendor.js (since it seemed to have the correct 'isDevBuild' flag and uses the babel preprocessor), but now the stuff from ClientApp isn't included when published:
Exception: Call to Node module failed with error: Prerendering failed because of error: Error: ENOENT: no such file or directory, open 'C:\inetpub\wwwroot\...\ClientApp\boot-server.js'

After manually copying this directory (sorry, new to webpack/babel, no idea how to reference the bundled/ processed js files) I got the error: Cannot find module 'aspnet-prerendering' - seems logical since it is only included as a devDependency in package.json :)

Since I don't know what I'm doing I'll stop here :)

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

If I remove bootstrap no vendor.css is created

I've removed all dependencies of bootstrap.css because I don't want to use it:
from package.json
from webpack.config.vendor.js
did all from scratch after cloning repository.
Afterwards:
npm install
dotnet run
no vendor.css has been created in wwwroot/dist
Did I miss something?

Question: Can this work with .NET Standard

We can't move to Core yet due to some of our libraries?

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?

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

Add Bootstrap

some updates

Hi @MarkPieszak ,

i started some work in my fork of this repo. main goal is to bring it more up to par with the other aspnetcore starters (knockout/react)
https://github.com/vip32/aspnetcore-Vue-starter

• same webpack/npm setup
• some folder structure
• site.css added
• bootstrap added
• vs2017 csproj
• SampleDataController like other starters

next thing:

• bring the demo app alive with bootstrap
• typescript
• dotnet new capability

for now i have removed the server side rendering, not so convinced it is needed in a non advanced starter. also vue apps should already load fast (due to footprint), compared to ng. for crawlers it is interesting of course.

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)

I can not publish to IIS

In visual studio it works perfectly, but when I try to publish to IIS it does not work. Displays the following error: ASP.NET: HTTP Error 500.19 - Internal Server Error 0x8007000d
I researched in several places but I could not solve.

Do you have plans for sass or less support?

I tried to use some paid template to this project,
and i'd like to use bootstrap4 with sass or bootstrap3 with less,
which would you like?
If done, i wanna contribute for this project

It's could be compatible with webpack Vue CLI template

The directory structure created by vue-cli is diferent with this actual structure.

Is imposible to make it identical?

Take a look:
http://vuejs-templates.github.io/webpack/structure.html
https://github.com/vuejs-templates/webpack/tree/master/template

PackageTargetFallback and AssetTargetFallback cannot be used together

Hi, I'm running .NET Core 2.0.0 stable. When I run dotnet restore on a freshly cloned project, I get the following error:

error NU1003: PackageTargetFallback and AssetTargetFallback cannot be used together.
Remove PackageTargetFallback(deprecated) references from the project environment.

I tried deleting the PackageTargetFallback property from Vue2Spa.csproj as suggested in this post from stackoverflow and it works.

ignore package-lock.json instead of package.lock.json

The .gitignore file contains package.lock.json

Shouldn't this be package-lock.json?

SSR is enable?

How do you want enable Server Side Render within ASPnetCore?

npm install fails on typescript

npm ERR! path ...\aspnet-vue\node_modules\typescript npm ERR! code ENOENT npm ERR! errno -4058 npm ERR! syscall rename npm ERR! enoent ENOENT: no such file or directory, rename '...\aspnet-vue\node_modules\typescript' -> '...\aspnet-vue\node_modules\.typescript.DELETE' npm ERR! enoent This is related to npm not being able to find a file.

I got this message from npm.
i tried to change the typescript to 2.4.1, and this error gone, but i don't know why.

and why i need typescript in this project? thanks

Update to aspnet-prerendering 2.*

Updates needed to server.js file

How to config webpack.config.js to support less,scss,sass ?

Hi ,
I do not know how to config it to support less,scss,sass.
And I want write (embedded) style (scss,less,sass) in *.vue file.
Could you give me some tips.

Adding Breakpoints In Visual Studio?

Has anyone been able to add breakpoints to .js or .vue files using Visual Studio?

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?

bootstrap hamburger not expanding

When you resize the viewport to hide the left gutter, the hamburger does not expand.

Stuck on loading screen.

I cloned the project, did a dotnet restore successfully, and an npm install successfully. Then running the application both from the CLI and from withing Visual Studio, I am getting just the loading screen. The console gives a 404 for the following files:

http://localhost:5000/dist/site.css 
http://localhost:5000/dist/main.js 

An unhandled exception of type 'System.IO.FileNotFoundException' occurred in Unknown Module.

just cloned and attempted to run as per instructions. When trying to build in Visual Studio 2017 15.4.1 I am getting the following:

An unhandled exception of type 'System.IO.FileNotFoundException' occurred in Unknown Module. Could not load file or assembly 'System.Runtime, Version=4.2.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a' or one of its dependencies. The system cannot find the file specified.

If I attempt 'npm run dev' or 'dotnet run' it will build and run.

Seems to be an issue with VS 2017?

.NET Command Line Tools (2.0.0)

Product Information:
Version: 2.0.0
Commit SHA-1 hash: cdcd1928c9

Runtime Environment:
OS Name: Windows
OS Version: 10.0.15063
OS Platform: Windows
RID: win10-x64
Base Path: C:\Program Files\dotnet\sdk\2.0.0\

Microsoft .NET Core Shared Framework Host

Version : 2.0.0
Build : e8b8861ac7faf042c87a5c2f9f2d04c98b69f28d

Project changes to sync with aspnet/JavaScriptServices templates

• Change .csproj name to VueSpa.csproj or Vue2Spa.csproj like the others (Angular2Spa.csproj, KnockoutSpa.csproj, ReactSpa.csproj, etc.)
• Add VueSpa.xproj for backward compatibility with MSBuild
• Add back project.json for VS2015 compatibility (the other Spa templates have this as well)
• Change default namespace to either VueSpa or WebApplicationBasic (example here: https://github.com/aspnet/JavaScriptServices/blob/dev/templates/KnockoutSpa/Controllers/HomeController.cs)
• Sync up .csproj like here: https://github.com/aspnet/JavaScriptServices/blob/dev/templates/Angular2Spa/Angular2Spa.csproj
  • Simplify/reduce package references
  • Add <Content Remove="ClientApp\**" />
  • Add <Target Name="RunWebpack" AfterTargets="ComputeFilesToPublish">

Doesn't work with VSCode

Cloned the repo then in VSCode I ran start with debugging and it never ran.

I think you are missing the .vscode/* files.

what is the correct way to add new NuGet packages?

I tried to install NuGet packages by right clicking on Dependencies inside VS2017, the error shown is:
Error Package restore failed. Rolling back package changes for 'Vue2Spa'.

I also tried to add the dependency inside the 'Vue2Spa.csproj' file. This method worked but I feel it is still not the best way to do it.

I could not find any other information elsewhere, so I'm here asking what is the best way to add new NuGet packages? Thanks.

Proposal: Typescript support

Are there any plans for Typescript support? It would be great, to have static type checking, while working on complex projects with this template.

Update demo application / components

Please update for ASP.NET Core 2

It would be great if this were updated for the new version of ASP.NET Core and made available with the other new spa templates for angular/react in VS 2017 with ASP.NET Core installed.

Use axios in place of vue-resource

Since vue-resource is retiring (https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4#.lu29ki141), thought this might be a logical next step to get this template up to par.

I've forked the repo and will submit this back as a PR if you're good with that.

I'll even set Vue.prototype.$http = axios to minimize disruption.

Prerendering failed because of error: Error: Cannot find module '/../bin/Release/netcoreapp1.1/publish/ClientApp/boot-server'

I tested deploying this but gave me the command line error cannot find boot-server. My browser shows this: An error occurred while processing your request.
I'm using Mac with environment setting ASPNETCORE_ENVIRONMENT=Production

Add WebAPI demo

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?

add to awesome-vue list

https://github.com/vuejs/awesome-vue

Typescript support - getting started page

Hello,
today I downloaded and compiled project. In getting started page you write information about typescript support, but I dont think that your webpack script is ready for typescript support. Even if it is, vue in typescript require a lot cool libraries to work well - attributes, routing etc.

Am I miss something or this starter isnt ready right now for typescript support ? (dont see any ts file)

BTW: Really nice job with this project.

thanks for your help

Can it integrate the nuxt.js to support server-side rendering?

Nuxt.js is a framework for creating Universal Vue.js Applications.

Its main scope is UI rendering while abstracting away the client/server distribution.

Our goal is to create a framework flexible enough that you can use it as a main project base or in addition to your current project based on Node.js.

Nuxt.js presets all the configuration needed to make your development of a Vue.js Application Server Rendered more enjoyable.

In addition, we also provide another deployment option called: nuxt generate. It will build a Static Generated Vue.js Application. We believe that option could be the next big step in the development of Web Applications with microservices.

As a framework, Nuxt.js comes with a lot of features to help you in your development between the client side and the server side such as Asynchronous Data, Middleware, Layouts, etc.

Upgrade to vue.js 2.2

https://alligator.io/vuejs/upgrading-vue-2.2/
also brings some improvements to SSR, nothing breaking

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 )

There is no server-side rendering for seo

When will this function be added?

Dont Change View

Hi

after change vuejs code in vs code and run again project, project run without change.

please help me to run project and see change code in view.

Thanks.

Showcase Vuex State management

Update to TypeScript

Can't "easily" edit vue based assets in Visual Studio

In VS2017, I don't see the ClientApp folder in The solution browser, making it difficult to work with the vue components.

I'm assuming because the ClientApp folder is marked for removal in the .csproj file:

  <Content Remove="ClientApp\**" />

Any suggestions (outside of toggling "show all files") on making them visible?