The complete NUXT.JS V4 course. Welcome to the server side

Create a Nuxt v4 project using npm create nuxt@latest in VS Code's integrated terminal, choose npm, and run npm run dev to see routing and server side rendering at localhost:3000.

Explore how Nuxt v4 automates routing through a file-system pages directory, generating routes from index.vue and other pages like about, contact, and users/profile, without using Vue Router.

Set up a Nuxt.js v4 app by creating a pages directory and index.vue as the home, and manage routes like /contact while handling 404s and hydration issues.

Learn to create nested routes in Nuxt.js v4 by organizing pages into directories, adding indexed views like users and profile, and navigating between nested routes to keep views structured.

Access dynamic route params in Nuxt.js v4 using the route object or useRoute in setup to read id and name from the URL, with notes on SSR logs.

Learn how to manage seo and meta tags in nuxt v4 with use head and use seo, including setting titles, descriptions, and og tags with reactive updates.

Define page meta declares route props to set title and description via a declarative object; access these props through the route, then use head for reactivity.

Explore Nuxt.js v4 layouts: create a layouts folder inside the app, define default and secondary layouts, assign layouts per page, and even switch layouts dynamically with set page layout.

Learn to implement client-side navigation in nuxt.js v4 using the next link component for home and contact routes, and navigate programmatically with the use router composable and router.push.

Learn how nuxt v4 auto-registers components from the components directory, letting you use them in templates without imports, and organize with directory prefixes for nested components like users/profile.

Explore configuring Nuxt.js v4 to manage components with auto-import and custom directories, enabling or disabling the path prefix and adding a second components folder for profile components.

Explore styling options in Nuxt v4, using scoped or global CSS, assets/main.css, and global imports via Nuxt config. Learn to add external styles with head or useHead for reactive styling.

Link external fonts or load local fonts from the public/fonts directory with @font-face. Apply font-family Roboto, then explore sass integration, colors.sass in assets, style blocks, modules, and postcss.

Understand named and local middleware in Nuxt.js v4: declare a named middleware, trigger it from page meta, and implement page-local middleware to control execution order with global middlewares.

Explore Vue.js composables in a Nuxt.js context, learn how to create a composables directory, export a get users function, and use it with refs, loaders, and a simple add-user workflow.

Nuxt.js exposes root-level composables and blocks access to nested directories; implement an index.js to re-export composables for easy imports.

Discover how to create a utils directory in nuxt.js v4 to store small reusable functions, export named or default utilities, enable auto import, and reuse them across pages.

Learn how Nuxt.js plugins register before app mount, expose global utilities and components, and how to define and access values like red and blue.

Learn how to customize Nuxt's 404 page by creating error.vue in the app directory, accessing error props for status code and message, and wrapping with a layout to preserve styling.

Create a Nuxt.js v4 template, install bootstrap, set up the nuxt config, and build a minimal server-side app with employee pages including add, edit, and detail routes.

Explore how Nuxt pre-renders html on the server, hydrates with client-side javascript, and optimizes seo through ssr, routing, and server-side lifecycles.

Set up a local fake rest API with json server on a db.json database to perform get, post, put, patch, and delete operations for development.

Learn how to fetch data in Nuxt v4 using fetch, use fetch, and use async fetch, compare server-side and client-side rendering, display employees with Bootstrap cards and details links.

Create and test api routes in the Nuxt v4 server side course by implementing get and post handlers and using the event object to access request and response with fetch.

Build an add employee form in Nuxt.js v4 using Vue.js and v-model to capture full name, position, and age. Post data to an API route.

Post form data to the API using fetch, handle the request body and query parameters, and verify responses while posting employees to the server route.

Post employees to a JSON server using fetch with a request body, and implement client and server side validation and error handling, including name is too short.

Demonstrates that api routes and common routes share the same patterns in Nuxt.js v4. Shows creating hello.js in routes with export default defineEventHandler and returning a hello world response.

Explore server middleware in Nuxt, creating a logger and auth middleware, using cookies and tokens, accessing event context, handling unauthorized responses, and the role of Nitro, H3, and plugins.

Explore Nitro plugins to extend the Nuxt server with hooks such as request, before/after response, and error, using the Nitro app context to fetch data.

Create reusable server utilities in Nuxt by adding utils/index.js that exports an async getEmployees function. Use fetch, handle errors, and allow Nuxt to scan the utils directory to expose functions.

Discover how Nuxt's Nitro and the H3.js library power server-side functions, such as get cookie and set cookie. Learn to consult H3 documentation for available server-side methods.

Learn to build an edit employee page in nuxt.js, using an id route to fetch data, populate the form via v-model, and handle loading and error states before patching updates.

Patch an employee by id using a server-side API route, reading the body and query.id, and patching the database. Validate data, handle errors, and notify when the update succeeds.

Fetch the employee by id from the server and display their full name and position. Show loading and error states, add a remove button, and enable editing via route params.

Implement a Nuxt v4 delete employee flow by sending a delete request to an API endpoint with the employee id in the body, then redirect home on success.

Explore prerendering with Nuxt v4 by building and generating a static version, testing locally with serve, and inspecting routes in output and public.

Demonstrate the limits of prerendered static Nuxt apps, where without a server the API calls fail, and cover building a non-static server-side app with npm run build.

Define route rules to prerender the home route and produce a static version, using inline route rules and Nitro features.

Explore the official Nuxt modules page to install and configure plugins, and read the docs for practical usage. Build a dynamic sitemap using a module and api data.

Learn how Nuxt link prefetching preloads data by default to speed up navigation, and how to control or disable it via interaction, visibility, or configuration.

Explore lazy loading of components in Nuxt.js v4, using dynamic import to defer rendering for non-initial content, and compare with default eager loading to optimize initial load times.

Learn to optimize images in Nuxt.js v4 by installing Nuxt image module, replacing img with the Nuxt image component, and using WebP format and quality settings to improve loading times.

Build a Nuxt.js v4 server-side app from scratch using Nuxt UI and Tailwind, implement login and signup with session-based authentication, and manage events with Pinia and MongoDB.

Build a responsive app header with Nuxt UI in Nuxt.js v4, wiring dynamic navigation for login state and scaffolding layouts, pages, and routes for sign up and create event.

Build a sign up form in nuxt.js v4 with an auth layout, handling sign up and sign in states via email and password, including loading and navigation.

Develop client-side sign-up validation using a yup schema for email and password, enforcing required fields and basic rules, and plan to wire up a server API with MongoDB via Mongoose.

Create and configure a MongoDB project and cluster, set up admin credentials, and connect with mongoose using a connection string for a Nuxt.js v4 server, including event and user models.

Import mongoose and connect to MongoDB from the environment URI with error handling, using a cached connection and a db connect function to expose a model and API.

Create a mongoose-based user model in nuxt.js v4, with a schema for email and password, validation, defaults, and export for the sign-up API at /api/auth/sign-up.

Sign up users on the server by validating input, hashing passwords with bcrypt, storing the new user in the database, and creating a session with Nuxt auth utils.

Build a unified sign up and sign in flow in Nuxt.js v4 using a client-side composable and sign up helper, handle loading, server requests, toasts, and session refresh.

Implement server-side validation with yup in a Nuxt.js v4 app by creating a sign-up schema, importing it, and returning an errors array.

Create an api/auth/sign-in.js endpoint that validates input, checks the user by email, compares passwords with bcrypt, sets the session on success, and guard routes and prepare pinia integration in Nuxt.

Implement a Pinia user store in a Nuxt app, with actions for login and logout, manage isLoggedIn and user (id and email), and integrate with sign in and header logic.

Learn to implement logout, guard routes, and display nav links based on the user session in Nuxt, including fetching session data, updating the store, and a server-side logout endpoint.

Implement guard middleware in Nuxt.js to check user sessions on mount, fetch the latest user data, and redirect unauthenticated users to sign in, protecting routes like create event.

Create an event form with title input, content text area, and a date picker using date-fns for formatting, manage form data, validate with yup, show toasts, and submit to API.

Explore building a server api post endpoint in Nuxt.js v4 that validates user sessions with middleware and saves the event to the database with the owner attached from the session.

Post events via a create form, show toasts on success, manage loading and redirects, and implement server validation and error handling in Nuxt.js v4.

Define a server-side event schema with required fields, minimum lengths, and a nullable date; validate and return structured errors; client displays them as badges.

Protects home events by requiring a user login, checks the current session with useUserSession, fetches the logged in user's events, and conditionally renders the home events component.

Build a home events component in a Nuxt.js v4 app, fetch owner events from an API, and display title, content, date, and status with loading and error handling.

Implement pending, complete, and archive states for events via a single endpoint; trigger complete or delete with front-end buttons, while validating session and event ownership.

Implement a delete event workflow by sending a delete request to the api with the event id and action. Refresh events list after success and display a toast on errors.