Nuxt Basic for Beginners is a course in the fundamentals of Nuxt 4, the Vue.js framework, covering rendering modes, file-based routing, layouts, modules, server API routes, data fetching, error handling and SEO. It suits web developers and students who already write Vue.js, and you leave able to deploy a Nuxt website to production.
Nuxt is a framework built on Vue.js that renders pages on the server, so sites load quickly and suit SEO-driven work such as company sites, blogs and online stores. Nuxt provides the structure most projects need, including file-based routing, auto imports, a module system and server APIs in one project, so teams can start quickly without configuring everything themselves.
This course teaches current Nuxt 4 to people who already write Vue.js. It starts with project structure and rendering modes, then covers routing, layouts, components, middleware and state. Learners then use modules, write basic server APIs, fetch data, handle errors, add SEO and finish by building and deploying a site to production. (2 days, 6 hours per day, 12 hours in total, Beginner level.)
Course Details
This course is the 2026 edition of Nuxt 3 Basic for Beginners. It runs for 2 days, 6 hours per day (12 hours in total, 09:00-16:00), as lectures with labs. Beginner level. Because Nuxt 3 has reached end of life, this edition moves to Nuxt 4, which keeps app code in the app directory. It keeps the original core of rendering modes, file-based
routing, layouts, components, NuxtLink, modules, server APIs, data fetching, error handling and deployment, and adds route middleware, shared state with useState and SEO with useSeoMeta. The course is for people who already write Vue, unlike Basic Vue and Nuxt with Prisma and Supabase, which teaches Vue from the start together with a database. Learners take home a lab guide and the source code of a blog site.
Section 1: Lab: Introducing Nuxt 4 and Creating a Project
Section 2: Rendering Modes in Nuxt
Section 3: Lab: File-Based Routing
Section 4: Layouts, Components and Pages
Section 5: NuxtLink, Navigation and Middleware
Section 6: Lab: State and Composables
Section 7: Lab: Using Nuxt Modules
Section 8: Lab: Writing Basic Server APIs
Section 9: Lab: Reading Data from APIs
Section 10: Error Handling in Nuxt
Section 11: SEO and Meta Tags
Section 12: Workshop: Build and Deploy
No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770
Nuxt renders on the server (SSR) by default, so the browser and search engines first receive complete HTML, which is then hydrated to become interactive. You can also prerender pages as static files (SSG), render only on the client (CSR) or mix modes in one app (hybrid rendering) by setting routeRules per route, for example prerendering the home page and rendering a dashboard on the client.
Nuxt builds routes automatically from files in the pages directory, so pages/about.vue becomes /about, and a file with square brackets such as pages/posts/[id].vue is a dynamic route whose value you read with useRoute. In Nuxt 4 the pages directory sits inside the app directory, and NuxtLink links pages and prefetches the next page for you, so you do not write router configuration yourself.
Create a file in server/api that exports a defineEventHandler returning your data, and Nuxt creates an endpoint from the file name, so server/api/posts.get.ts becomes GET /api/posts. In a page, use useFetch to load the data, which works during SSR and on the client without fetching twice and returns data, status and error for the template. For user actions such as submitting a form, use $fetch.
Nuxt 3 reached end of life on 31 July 2026 and no longer receives security fixes. Nuxt 4 moves app code into the app directory, adds a shared directory for code used by both app and server, and adjusts data fetching, for example data from useFetch is a shallowRef by default. Core ideas such as routing, layouts and server APIs stay the same, and the course includes a comparison table for migrating existing projects.
It suits people who want fast, SEO-friendly websites, Vue developers moving from single-page apps to SSR, frontend developers maintaining Nuxt 3 projects and interested students. You should know basic HTML, CSS and JavaScript and have written some Vue.js. If you have never used Vue, choose Basic Vue and Nuxt with Prisma and Supabase instead.
You can build a Nuxt 4 site from scratch to production: structure the project, choose the right rendering mode for each page, set up routing, layouts and middleware, write basic server APIs, fetch data and handle errors, set SEO meta tags and deploy to the cloud. You are also ready for Nuxt Advanced, which goes deeper into databases, authentication and multilingual sites.
Every major browser now supports HTML and CSS features that used to need JavaScript or third-party libraries: forms that validate themselves, dialogs and popovers, styling based on what an element contains with :has(), components that adapt to the space they…
Java is still the main language behind many enterprise, banking and backend systems, but the language has changed a great deal in recent years. Many books and examples still teach Java 8 style, with long code and no records, pattern matching or virtual…
Once a Nuxt site grows to many pages and languages, with a database and user accounts, the challenge shifts from making pages render to structuring the project so a team can maintain it, handling errors systematically, protecting data on the server and…
