1

What is the best way to use Vue js inside a .net core (2.1) project. I am using visual studio 2017 for my .net core application. There are multiple ways to integrate vue in my .net core application:

3rd and 4th approach are almost similar only difference is that task runner is doing the build and related stuffs and manually adding package.json etc but in 4th approach CLI explicit commands are used for building the app.

I am looking forward for a best choice to integrate vue in my .net core (2.1) application (visual studio 2017 is my choice of IDE for working with .net core)

Improve this question
6
  • There is nothing called the best way to do something in software. All approaches depend on your situation Commented Jan 1, 2020 at 5:55
  • @Anduin I agree with your point but since I am new to Vue js I would like know what the openion of people who are already working on this Commented Jan 1, 2020 at 7:44
  • 1
    @Aathira Reason for downvotes is that your question is very opinion based and open for "it depends" answers. I agree that getting downvoted without comment can be frustrating...SO recommends commenting when downvoting but few people follow the recommendations. If your question gets closed, consider posting it on softwarerecs.stackexchange.com Commented Jan 1, 2020 at 8:59
  • @Anduin Sorry, wrong person tagged ;) Commented Jan 1, 2020 at 9:02
  • @MichalLevý :) Thanks for the comment. Will post it on stackexchange. Commented Jan 1, 2020 at 9:09

1 Answer 1

Reset to default
7

Just a few (hopefully useful) comments

Option 1 and 2

This approach is very simplistic and good for only very simple apps (and maybe codeproject demos). Why is it bad ?

  1. Vue.js code (template in this case) in server rendered Razor view. This is very bad idea for a few reasons, maintenance being most important for me. Its also hard to debug - you need to recompile and restart your Core app to see the result of your change (which make your SPA to reload and loose a state), there are no source maps, no hot reloading
  2. Vue template (which looks like HTML but in reality it's converted into JavaScript code generating Virtual DOM) is compiled at runtime instead of at build time. This not only makes your app 1st render take longer but also forces you to use Vue build with template compiler included thus increasing amount of Javascript browser needs to download and parse when loading the page
  3. Your VueJS (Javascript) code is not minimized, you don't use transpilation (Babel) or code splitting (Async Components) or Vue single file components
  4. Simply you don't have the power of Webpack and Vue CLI

Option 3

Is better in the way it is using npm/webpack/babel/eslint but it recommends creating your own configs. Main argument being

There is a tendency for JavaScript frameworks and libraries to rely on scaffolding tools for setup and configuration of an application. While this does get you up and running more quickly, it also alleviates you of understanding the settings and often leaves you with a bloated configuration.

This was valid argument back when there was only Vue CLI 2.x which generated your project from a template and after initial generation the burden to maintain the configuration (together with updating many npm packages used at build time) was solely on developer. Vue CLI 3.x changed that dramatically - it not only generates initial app but also manages all the tooling configuration for you.

One thing the article does right is keeping Vue app (SPA) separate from server (ASP.NET is here only to serve static files)

Recommendations

  1. Separate SPA and server - use Vue CLI for your SPA (just make subfolder in your Core app and generate there). Use Core just to implement API SPA will be using (and maybe some Error fallback route).
  2. For development you can setup VS to lunch both Core Dev server and CLI dev server and proxy API requests from your SPA to Core dev server. Inspiration here and here. That way you can change your API without restarting SPA and vice versa...
  3. I highly recommend using Visual Studio Code for your SPA development. Together with Vetur extension it provides far superior Vue development experience compared to full VS (and its free!)
  4. For production, its not hard to incorporate Vue CLI build command into Core project build process

To consider

Think about Server side rendering (SSR). It's deal breaker for many types of sites and its very hard without using Node as your server

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.