Nowadays, there are 3 major JavaScript frameworks for front end development: Angular, React and Vue.
Angular has a steep learning curve. It seems only support SPA (single page application).
Vue positions itself as “The Progressive JavaScript Framework” which means it is easier to learn than Angular or React and easier to integrate with existing ASP.NET MVC applications.
There are a couple of articles, such as this one on how to integrate Vue.js in .NET MVC projects in such a way so you can use NPM, webpack and Vue single page components.
My goal is to integrate Vue to ASP.NET MVC framework, so I can fully utilize Vue’s capability and modern front end technologies, such as SCSS, ES2015, Vuelidate, FontAwesome and Foundation.
Project setup explained
You can also find the sources inside this Github repository. The application contains 4 pages: Useragreement, UserAgreementDisagree, Home, PersonalData. Each page will have its own entry in webpack configuration.
The Vue application is in /src/app folder. Inside this folder, we have following subfolders:
The “entries” folder contains all the entry points. ASP.NET MVC is multi-page application. Each MVC view is an entry to Vue application.
The “pages” folder contains Vue Single File Components for each MVC View.
The “service” folder contains “employeeservice.js” which will call back end api to retrieve employee information using axios.
The “components” folder contains common Vue components used by the application.
The “main.js” is the main entry point which will load common javascript libraries and styles.
packages.json
In the application, we created a employee service and use the axios to read employee information from back end web api. We use the foundation for the site styles and common UI. We used Vuelidate for form validation in UserAgreement page. Vue-template-compiler is required for compile Vue single file components.
webpack.config.js
The “jsEntries” array contains all the entry points javascript files. Webpack will compile each item in the jsEntries array and output a javascript file with same name to /Scripts folder.
The webpack is also able to compile Vue Single File Components via vue-loader; compile .scss file using sass-loader.
The “spiltChunks” block defined in webpack configure file would split all third party libraries (under /node_modules folder) to vendor.js file and vendor.css file.
_layout.cshtml
In the “_layout.cshtml”, we first include the two style sheets: vendor.css (third-party styles) and main.css (our own style).
At the bottom of the file, the es6-promise.min.js and es6-promise.auto.min.js are required for polyfill Promise. Otherwise it will get error on IE 11.
UserAgreement.cshtml
This is the first page of the application. All the .cshtml pages are similar. They only load the entry .js file.
entries/useragreement.js
All the entry js files are similar: They only render the corresponding single file component in pages folder.
pages/useragreement.vue
This is the main logic of the page. We can utilize the full capability of the Vue in this .vue file.
Other pages follows the similar structure as “User Agreement” page.
How to run application in debug mode?
To run the application in development mode, you need to follow these steps:
- In VisualStudio, start the web project. The project would start at http://localhost:5002.
2. Open a command line console and change the directory to the root of the Web project (where the web.csproj file is).
3. Enter the command npm run dev to start the webpack-dev-server. The command actually run the command configured in the packages.json:
cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 8086
4. Open a browser and enter the address http://localhost:8086 to see the page. The default page is /Home/UserAgreement. The page would looks like following:
Publish application
In order to publish the application, in the same console, enter the command npm run build. The compiled javascript and css files will be created under /Scripts folder.
Conclusion
We have integrated Vue into ASP.NET MVC and able to use the full features of Vue for the front end development. On the other hand, we can still use ASP.NET MVC framework to handle authentication and authorization.
Again, you can download the whole solution source code at this Github repository.
Happy coding!