Book Image

ASP.NET Core and Vue.js

By : Devlin Basilan Duldulao
Book Image

ASP.NET Core and Vue.js

By: Devlin Basilan Duldulao

Overview of this book

Vue.js 3 is faster and smaller than the previous version, and TypeScript’s full support out of the box makes it a more maintainable and easier-to-use version of Vue.js. Then, there's ASP.NET Core 5, which is the fastest .NET web framework today. Together, Vue.js for the frontend and ASP.NET Core 5 for the backend make a powerful combination. This book follows a hands-on approach to implementing practical methodologies for building robust applications using ASP.NET Core 5 and Vue.js 3. The topics here are not deep dive and the book is intended for busy .NET developers who have limited time and want a quick implementation of a clean architecture with popular libraries. You’ll start by setting up your web app’s backend, guided by clean architecture, command query responsibility segregation (CQRS), mediator pattern, and Entity Framework Core 5. The book then shows you how to build the frontend application using best practices, state management with Vuex, Vuetify UI component libraries, Vuelidate for input validations, lazy loading with Vue Router, and JWT authentication. Later, you’ll focus on testing and deployment. All the tutorials in this book support Windows 10, macOS, and Linux users. By the end of this book, you’ll be able to build an enterprise full-stack web app, use the most common npm packages for Vue.js and NuGet packages for ASP.NET Core, and deploy Vue.js and ASP.NET Core to Azure App Service using GitHub Actions.

Related Content you might be interested in

Current Title:

Small book image
ASP.NET Core and Vue.js
Devlin Basilan Duldulao
Jun, 2021 | 478 pages
Small book image
Hands-On RESTful Web Services with ASP.NET Core 3
Samuele Resca
Dec, 2019 | 510 pages
Small book image
Building Real-World Web Applications with Vue.js 3
Joran Quinten
Jan, 2024 | 318 pages
Small book image
Mastering Minimal APIs in ASP.NET Core
Emanuele Bartolesi | Andrea Tosato | Marco Minerva
Oct, 2022 | 240 pages
Table of Contents (25 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Download the color images
Conventions used
Get in touch
Reviews
1
Section 1: Getting Started
Section 1: Getting Started
Free Chapter
2
Chapter 1: Getting Started with ASP.NET Core and Vue.js
Chapter 1: Getting Started with ASP.NET Core and Vue.js
Technical requirements
Introducing ASP.NET Core
What's new in .NET?
What's new in ASP.NET Core?
Introducing Vue.js
Summary
3
Chapter 2: Setting Up a Development Environment
Chapter 2: Setting Up a Development Environment
Technical requirements
Installing and configuring VS Code, Visual Studio 2019, VS for Mac, and Rider
Installing .NET SDK, Node.js, and npm
Setting up the .NET Core CLI and Vue CLI
Installing Postman and Vue DevTool
Installing Entity Framework Core tools
Installing a database provider
Installing Git version control
Summary
4
Section 2: Backend Development
Section 2: Backend Development
5
Chapter 3: Starting Your First ASP.NET Core Project
Chapter 3: Starting Your First ASP.NET Core Project
Technical requirements
Creating an ASP.NET Core project
Understanding the Program.cs file
Demystifying the Startup.cs file
Getting started with Swashbuckle
Summary
6
Chapter 4: Applying Clean Architecture to an ASP.NET Core Solution
Chapter 4: Applying Clean Architecture to an ASP.NET Core Solution
Technical requirements
Introducing clean architecture
The core layer – directory
The infrastructure layer – directory
The presentation layer – directory
Managing tests – directories
Structuring a clean architecture solution
Summary
7
Chapter 5: Setting Up DbContext and Controllers
Chapter 5: Setting Up DbContext and Controllers
Technical requirements
Writing entities and enums
Setting up a database, EF Core, and DbContext
Writing controllers and routes
Testing controllers with Swagger UI
Summary
8
Chapter 6: Diving into CQRS
Chapter 6: Diving into CQRS
Technical requirements
What is CQRS?
What is the mediator pattern?
Why learn CQRS?
When to use CQRS
Drawbacks of CQRS
Summary
9
Chapter 7: CQRS in Action
Chapter 7: CQRS in Action
Technical requirements
Implementing CQRS
Using FluentValidation
Using AutoMapper
Writing queries
Writing commands
Writing IServiceCollection
Summary
10
Chapter 8: API Versioning and Logging in ASP.NET Core
Chapter 8: API Versioning and Logging in ASP.NET Core
Technical requirements
API versioning
Logging in ASP.NET Core
Summary
11
Chapter 9: Securing ASP.NET Core
Chapter 9: Securing ASP.NET Core
Technical requirements
Understanding ASP.NET Core Identity
Introducing IdentityServer4
Customer identity and access management (CIAM)
Authentication implementation using JWT
Summary
12
Chapter 10: Performance Enhancement with Redis
Chapter 10: Performance Enhancement with Redis
Technical requirements
In-memory caching in ASP.NET Core
Distributed caching
Setting up and running Redis
Implementing Redis in ASP.NET Core
Summary
13
Section 3: Frontend Development
Section 3: Frontend Development
14
Chapter 11: Vue.js Fundamentals in a Todo App
Chapter 11: Vue.js Fundamentals in a Todo App
Technical requirements
Starting a project using the Vue CLI
Files and folders generated by the Vue CLI
Getting started with a Vue component
Common features in a Vue component
Summary
Further reading
15
Chapter 12: Using a UI Component Library and Creating Routes and Navigations
Chapter 12: Using a UI Component Library and Creating Routes and Navigations
Technical requirements
Using a third-party UI component library
Other third-party UI libraries
Adding navigation bars
Writing page components
Setting up Vue Router with lazy loading and eager loading
Summary
16
Chapter 13: Integrating a Vue.js Application with ASP.NET Core
Chapter 13: Integrating a Vue.js Application with ASP.NET Core
Technical requirements
Putting ASP.NET Core Web API and a Vue.js app together as a single unit
Introducing Cross-Origin Resource Sharing or CORS
Enabling a CORS policy in ASP.NET Core
Summary
17
Chapter 14: Simplifying State Management with Vuex and Sending GET HTTP Requests
Chapter 14: Simplifying State Management with Vuex and Sending GET HTTP Requests
Technical requirements
Understanding complex state management
Sending an HTTP request in Vue.js
Setting up state management using Vuex
Summary
18
Chapter 15: Sending POST, DELETE, and PUT HTTP Requests in Vue.js with Vuex
Chapter 15: Sending POST, DELETE, and PUT HTTP Requests in Vue.js with Vuex
Technical requirements
Removing a tour list using Axios and Vuex
Adding a tour list using Axios and Vuex
Using a non-async action in Vuex
Removing a tour package using Axios and Vuex
Adding a tour package using Axios and Vuex
Updating a tour package using Axios and Vuex
Summary
19
Chapter 16: Adding Authentication in Vue.js
Chapter 16: Adding Authentication in Vue.js
Technical requirements
Setting up Vuex for authentication
Writing an auth guard
HTTP interceptor
Auto login
Summary
20
Section 4: Testing and Deployment
Section 4: Testing and Deployment
21
Chapter 17: Input Validations in Forms
Chapter 17: Input Validations in Forms
Technical requirements
Installing an input validation library
Using validators in forms
Summary
22
Chapter 18: Writing Integration Tests Using xUnit
Chapter 18: Writing Integration Tests Using xUnit
Technical requirements
Getting started with automated testing
Installing MS SQL Server in a Docker container
Understanding xUnit
Understanding unit testing
Understanding integration testing
Summary
23
Chapter 19: Automatic Deployment Using GitHub Actions and Azure
Chapter 19: Automatic Deployment Using GitHub Actions and Azure
Technical requirements
Introducing GitHub Actions – a CI/CD tool
Understanding GitHub Actions
Understanding where to deploy
Automated deployment to Azure App Service using GitHub Actions
Summary
Why subscribe?
24
Other Books You May Enjoy
Other Books You May Enjoy
Packt is searching for authors like you
Leave a review - let other readers know what you think

Installing an input validation library

A user-friendly validation informs the user why the field is not valid while typing the input. We can build it from scratch by writing a validator in every field of the form and making sure that the validators are reactive. The implementation is doable, but it will require a lot of time, and the cleanliness of the code will depend on the developer.

So why not use a library that validates us? Fortunately, there are several Vue.js libraries for validation, and in this section, we will use one of the top libraries.

So let's install an input validation library:

npm i vuelidate

The vuelidate library is a simple lightweight model-based validation that we can use for our Vue application.

Now, let's create a JavaScript file called vuelidate.js in the src/plugins folder and apply the following code:

import Vue from "vue";
import Vuelidate from "vuelidate";
Vue.use(Vuelidate);

The preceding code imports...

Previous Section
End of Section 3
Next Section