I have been trying to create a new project using the new Vue CLI 3 with ASP.Net Core web. I can use dotnet new to create a nice new blank web project, and can use vue create to create a new Vue.js Hello World template but I can't for the life of me get them working together.
Add a comment
|
2 Answers
I wrote a detailed tutorial available at Medium.
You can use Microsoft Microsoft.AspNetCore.SpaServices NuGet package to specify SpaStaticFiles folder instead of copying client app on build to wwwroot and ignore *.cshtml files and use directly vue index.html file.
You can also install VueCliMiddleware NuGet to run npm process with client app using Vue CLI 3.0 when your .NET app starts.
Comments
It should be pretty straight forward
- Create a new dotnet project
- Create a folder inside dotnet solution. For instance, VueApp, ClientApp, or something.
- Scaffold a new Vue project inside that folder using Vue cli.
- Change the output directory to point to something like "../../wwwroot/dist"
- Build your app. Take note though if you're building for dev or production, output structure will be different.
- In your
_Layout.cshtmlorIndex.cshtml, however you want to organize it, reference those outputted files. - Add
<div id="app"></div>into your.cshtml. - You're done, enjoy.
4 Comments
bCliks
hi..
Change the output directory to point to something like "../../wwwroot/dist" Where I need to change. Which file? Vue.config.js ?
Danijel
It depends how are you building your files. yes vue.config.js if you are building through console. If you are using Vue Ui then there's a settings button at build action, change folder option to point to wwwroot.
4ern
Hi, is this solution possible with nuxt? or how can I set that?
Danijel
Hi, it shouldn't be any different. If using Nuxt, repeat all the steps and also make it drop built files into wwwroot folder. Probably also config file. This may do the trick: stackoverflow.com/a/54418282/5265610