Vue 3 and NestJS: A Practical Guide with Docker

Install NestJS, create a new project with nest new named nest admin, start the server, and verify it runs by visiting the local server to see HelloWallet.

Create a dockerfile and docker-compose.yml to run a nestjs app with a mysql database. Map host port 8000 to container port 3000 and persist database data with volumes.

Create and connect a user model with a controller and service in Nest, expose a get endpoint at /users, and verify it returns an array of users.

Configure a docker-based database with TypeORM, create a user entity (id, first name, last name, unique email, password), map it to the users table, and run migrations.

Create a NestJS user service with a repository, inject it into the controller, and implement a find all function that returns a promise of users.

Register users by implementing a post /api/register endpoint under a global api prefix, using a user model and controller in the authentication module, and sending data in the request body.

Register a user by invoking the user service create method, resolve circular dependencies via proper dependency injection and module wiring, and persist the user through the repository to the database.

Hash a user password with decrypt, import the TypeScript version, and resolve cross-platform issues to ensure the password is securely hashed during registration.

Configure a secure register flow by creating a register dto with first name, last name, email, password, and password confirm, and enforce validation with class-validator and a global validation pipe.

Implement login as a post request with email and password; retrieve the user by email, validate the password against stored hash, handle not found or invalid credentials, and prepare jwt.

Generate and sign a jwt with the user id payload, then transmit it via HttpOnly cookies in a NestJS backend to secure authentication and retrieve the authenticated user.

Retrieve the authenticated user from a JWT cookie by parsing cookies with cookie-parser, verifying the token with the JWT service, and returning the user via NestJS endpoint, with CORS credentials.

Learn how to use NestJS interceptors to hide sensitive fields like passwords by applying a serializer interceptor, ensuring secure responses across all user-related requests.

Implement a logout function that clears the cookie and JWT, sends a post request to logout, and returns a success message, addressing front-end access and error handling.

Create guards with responsibility to enforce authentication and authorization on user and logout routes by validating JWT token from cookies. Return true when authenticated; otherwise deny access and require login.

Create the user via a new post method, validate first name, last name, and email, hash the password, and enable retrieving a user by id with guards.

Share the JWT service across all controllers by introducing a common module and common model, exporting the JWT model and importing it into user and OAuth modules.

Explore implementing user update and delete operations in a rest API with NestJS and Vue 3, including a sync update function, put requests, and returning the updated user.

Add pagination to the user list by implementing a service method using find and count with page and take. Calculate skip and last page, and exclude passwords in the response.

Define and manage roles in a NestJS module by creating a Role entity, repository, service, and controller, then implement CRUD operations to create, read, update, and delete roles.

Define a many-to-one relationship between users and roles by adding a role foreign key with a join column, create roles, and assign them to users during creation and updates.

Create the permission entity and related controller and service, implement a permission repository with a get all method, and plan a many-to-many link to roles in the next tutorial.

Establish a many-to-many link between urls and permissions with a join table url_permissions, create it with permission id arrays, and load related permissions via the relations parameter.

Learn to build a reusable abstract service in NestJS by extracting common repository logic, extending it in multiple services, implementing pagination, and removing the user password while supporting optional relations.

Implement put endpoints to update the authenticated user's first name, last name, and password, handle the authenticated user via jwt, and resolve circular dependencies with forwardRef in NestJS.

Design and implement a full product management module with NestJS, creating a product entity, repository, service, and controller, including create, read, update, delete operations and paging.

Learn to implement an image upload workflow in NestJS using a controller, a file interceptor, and multer disk storage, including random filenames and serving uploaded images via a URL.

Build an order system with NestJS, creating order and order item entities, establishing a one-to-many relation, and exposing a secured get orders endpoint via a repository.

Expose fields in NestJS by returning a name from first and last name, and a total from order items using reduce, via class serializer interceptor and order entity updates.

Implement a post endpoint to export orders as a csv file, with headers like order id, name, email, product title, price, quantity, including order items, returned as a downloadable attachment.

Build a sql endpoint to generate a sales chart by joining orders and order items, summing price times quantity, and grouping by date by casting created_at to date.

Create and apply a custom has permission decorator and a permission guard in NestJS to enforce role-based access across controllers using metadata and Reflector.

implement an access guard by validating the authenticated user, loading the user role and permissions via services, and enforcing route-level access based on permissions.

Install Vue CLI, create a Vue project named view admin with TypeScript, Vue Router, and Vue 3, accept defaults, then run npm run serve to view it on localhost.

Modify the view template by simplifying the dashboard layout, removing unused files, and integrating the copied styles from the view page source to establish the new template.

Learn to split an email into reusable Vue 3 components by creating a components folder, building a nav and a menu component, and using them as template tags.

Configure Vue 3 routing with router-view and router-link to render dashboard and users components, set router index paths, and update navigation to highlight the active route.

Build a register page using a setup function that defines a reactive count with ref, binds it to an input via v-model, and renders updates automatically in the template.

Learn to build a register form in Vue 3 with a wrapper component that provides menu and navigation, using nested child routes and router-view for dashboard, users, and register.

Submit a TypeScript-enabled Vue 3 form by defining refs for first name, last name, email, password, and password confirm, binding them to inputs, preventing default, and logging values on submit.

Install axios and its TypeScript types, then register a user by posting data to the server's /register endpoint with axios, using both direct post and an async, deconstructed response approach.

Learn how to redirect users from registration to the login screen in a Vue 3 and NestJS app using the router and useRouter to push to login after success.

Implement a login template in Vue 3 by reusing the register form, building a reactive form object with email and password, and logging submitted values for sign in.

Learn to implement login in a Vue 3 and NestJS app by posting to the login endpoint, using with credentials to obtain cookies from the backend.

Fetch the authenticated user in a Vue app using mounted and unmounted hooks, call axios after render, and display the name in the navbar with a profile link.

Learn to implement logout in a Vue 3 and NestJS app, handle authentication state, redirect unauthenticated users to the login page, and protect dashboard routes via the router.

Create users folder in Vue 3 app, switch to TypeScript, fetch all users with axios, and render id, first name, last name, email, and role in a table with pagination.

Implement pagination to navigate the users list by managing a page state, wiring next and previous actions, and checking last page to avoid empty results.

Learn how to use Vue 3 watchers to automatically load data when the page changes, by watching a variable and triggering a function on navigation with next and previous controls.

Implement the delete function to remove a user by id with a confirmation prompt, updating users array by filtering. Define a user model class with id, firstName, lastName, and email.

Create a user in Vue 3 by building a reactive form for first name, last name, email, and role, fetch roles, post to users, and navigate to the user list.

Learn to convert the create user flow into an edit flow in Vue 3, add a user edit component, route with the user id, prefill the form, and update.

Create and manage roles in a Vue 3 app by building a roles view, wiring a menu link, fetching roles via axles, implementing a delete function and a role model.

Create a role by building a role create component, load permissions from an API, and submit a form with a name and selected permission IDs to the server.

Discover how to update roles and permissions in a Vue 3 and NestJS app, including fetching roles, mapping permission ids, and using put and delete operations to manage roles.

Add and manage products in a Vue 3 and NestJS app by importing the product component, displaying a products table with image, title, description, and price, plus delete and pagination.

Create a reusable pagination component to replace duplicated code, handling next and previous navigation, last page, and a page changed event for products and users in TypeScript.

Create a product form in Vue 3 using reactive data for title, description, image, and price. Submit with axios to post to the products endpoint and navigate to the product.

Build an image upload workflow by creating an image upload component, using a hidden file input linked to a button, and sending a single image with FormData to the server.

Update a product in a Vue 3 and NestJS app by fetching by id, form, and using a put request to update title, description, image, and price with image upload.

Add orders module in Vue 3, render a table of orders with name, email, total, and actions, and show order items (title, quantity, price) with pagination and a view button.

Learn how to implement simple show-and-hide animations in a Vue 3 component by toggling an order’s details with a selected id, max-height transitions, and CSS classes.

Export orders to a csv file by requesting blob data, creating a text/csv blob, building a temporary download link, and programmatically clicking it to save the file.

Install c3 and its types in the dashboard, switch the language to TypeScript, and configure a time-series bar chart bound to the date axis with sales data fetched via axios.

Build a profile page with two forms to update user info and password using Vue 3, TypeScript, and axios. Prefill data, handle submissions, and prepare for Vuex-based state management.

Define a Vuex store with an initial user state and a set user action that commits a user mutation, using dispatch and computed properties to access and update the user.

Organize the Vuex store with a user model and a namespace to separate user mutations, actions, and states as the app grows bigger.