Web Development · WDC-103

Basic Vue and Nuxt with Prisma and Supabase

Basic Vue and Nuxt with Prisma and Supabase is a beginner course in building full-stack web apps with Vue 3.5 and Nuxt 4, from components, routing and data fetching to server API routes, a Supabase database through Prisma and user login. It suits web developers and students with basic JavaScript, and you leave able to deploy a full-stack online store to the cloud.

Updated 9 Oct 2026

From 5,850 THB / person 6,500 −10% excl. VAT 7% · group rates available

Corporate training quote Join the waiting list

PDFDownload the course outline

Duration12 hours · 2 days
FormatOnsite / live online
Next roundOn request
CertificateIncluded

Course overview

Vue is a flexible web framework that is easy to learn, and Nuxt builds on Vue to create full-stack apps with file-based routing, server-side rendering and an API in a single project. Paired with Prisma, which gives typed database queries, and Supabase, which provides a PostgreSQL database with user authentication, even a small team can quickly build web apps ready for real use.

This course starts with Vue 3.5 fundamentals using script setup, then moves into current Nuxt 4, covering the app directory structure, routing, auto imports, layouts, middleware and data fetching. Learners then build server API routes, choose rendering modes with route rules, connect a Supabase database through Prisma 7, add login with Supabase Auth and finish by deploying a full-stack app to the cloud. (2 days, 6 hours per day, 12 hours in total, Beginner level.)

What you’ll gain

Write components with Vue 3.5 script setup and extract logic into composables
Create and structure a Nuxt 4 project
Use Nuxt file-based routing, layouts and middleware
Fetch data with useFetch, useAsyncData and $fetch in the right places
Build server API routes and choose the right rendering mode for each page
Connect a Supabase database with Prisma 7 and add login with Supabase Auth
Deploy a full-stack Nuxt app to the cloud

Who this course is for

Web developers who want to start with Vue and Nuxt for full-stack work
Frontend developers who want server APIs and a database in the same project
Developers using Nuxt 3 who need to move to Nuxt 4
Students and IT professionals with basic JavaScript who are interested in modern web apps

Prerequisites

Basic HTML and CSS
Basic JavaScript, including variables, functions, arrays, objects, async and await
A basic understanding of web apps and HTTP; deep experience is not required
A laptop that can run the current Node.js LTS release and VS Code

Curriculum

Course Details

This course is the 2026 edition of Basic Vue and Nuxt 3 with Prisma and Supabase. 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, uses Vue 3.5 with script setup, switches database access to

Prisma ORM 7 with prisma.config.ts and a driver adapter, uses Supabase's new API key format and sets rendering modes with route rules. It keeps the original core of routing, auto imports, middleware, layouts, data fetching, modules, server APIs, Prisma, Supabase and deployment. Learners use their own Supabase, GitHub and Vercel or Netlify accounts on free plans, and take home a lab guide and the source code of a full-stack online store.

Day 1 Vue 3.5 and Nuxt 4 Fundamentals

Section 1: Lab: Vue 3.5 with the Composition API

Set up Node.js, VS Code and the Vue - Official extension
script setup, ref, reactive and computed
Template syntax, v-if, v-for and v-model
Lab: a reactive product list page

Section 2: Lab: Components and Composables

Pass data with typed props and emits
defineModel for two-way bound components
Extract reusable logic into composables
Lab: reusable product card and cart components

Section 3: Introducing Nuxt 4 and Creating a Project

What Nuxt is and how it differs from Vue with Vite
Create a project with npm create nuxt and use the Nuxt CLI
The Nuxt 4 app, server and shared directories
What changed from Nuxt 3 and how to migrate an existing project

Section 4: Lab: File-Based Routing and Layouts

Create pages in the pages directory and use NuxtLink
Dynamic and nested routes
Default layouts and choosing a layout with definePageMeta
Lab: a store site with list, detail pages and a menu

Section 5: Auto Imports and Route Middleware

Auto imports of components, composables and utilities
Customise or disable auto imports when needed
Global and page-specific middleware
Lab: middleware that guards member pages

Section 6: Lab: Data Fetching in Nuxt

How useFetch, useAsyncData and $fetch differ
Fetch data during SSR without fetching again on the client
The status, error and refresh options
Lab: show products from an external API with loading states

Day 2 Server, Database, Login and Deployment

Section 7: Popular Nuxt Modules

Find and install modules with npx nuxt module add
Configure modules in nuxt.config.ts
Example modules for UI, images and SEO
Lab: add modules and restyle the store site

Section 8: Lab: Server API Routes

Create APIs in server/api with defineEventHandler
Read queries, route parameters and the request body
Validate input and return errors with createError
Lab: a product API used by the web pages

Section 9: Hybrid Rendering with Route Rules

How SSR, SSG and client-side rendering differ
Set the rendering mode per route with routeRules
Prerendering, SWR, ISR and caching for pages and APIs
Lab: a prerendered home page and SWR product pages

Section 10: Lab: Prisma 7 with Supabase

Create a Supabase project and choose the connection string
prisma.config.ts, schema.prisma and the prisma-client generator
Migrations and the PostgreSQL driver adapter
Lab: product CRUD through a server API using Prisma

Section 11: Lab: Login with Supabase Auth

Install @nuxtjs/supabase and use a publishable API key
Sign up and log in with email
Check the user on the server with serverSupabaseUser
Lab: a product admin page for administrators only

Section 12: Workshop: Deploying a Full-Stack App

Handle environment variables and runtimeConfig safely
Build the app and choose a Nitro preset
Deploy to Vercel or Netlify through GitHub
Workshop: a working full-stack online store in the cloud

Schedule & training options

For individuals — public rounds

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

Join the waiting list Ask about rounds

For organisations — in-house / private

Tailor the content to your team’s tools and projects
Your dates, at your office or live online
Quotation with tax ID for procurement

Corporate training quote

Instructors

Samit KoyomFounder & CEO, IT Genius Engineering

Frequently asked questions

What is the difference between the Composition API and the Options API in Vue 3?

The Options API organises component code by type, such as data, methods and computed, so a single feature's code spreads across sections as the component grows. The Composition API is written in script setup using ref, reactive, computed and watch, letting you group code by feature, extract reusable logic into composables and get better TypeScript support. Nuxt 4 and this course use script setup, though the Options API still works.

What is the difference between useFetch and $fetch in Nuxt?

useFetch is a composable for loading data when a page renders. It works on both server and client, passing data fetched during SSR to the client so it is not fetched twice, and returns data, status and error for the template. In Nuxt 4, data is a shallowRef by default. $fetch is a plain request function, suited to user actions such as submitting a form. For more control over fetching, use useAsyncData.

How do you set up Prisma with Supabase in a Nuxt project?

Create a Supabase project and copy the connection strings from its Connect panel into your .env file, using the connection pooler for the app and a session or direct connection for migrations. With Prisma ORM 7, configure prisma.config.ts, use the prisma-client generator and create PrismaClient with the PostgreSQL driver adapter. Then run your migrations and use PrismaClient only in files under server, so your database credentials never reach the client.

How is Nuxt 4 different from Nuxt 3, and should I upgrade?

Nuxt 3 reached end of life on 31 July 2026 and no longer receives security fixes, so moving to Nuxt 4 is recommended. Nuxt 4 keeps app code in 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. Most migrations are straightforward and codemods help. The course includes a comparison table for reference.

Who is the Basic Vue and Nuxt with Prisma and Supabase course for, and what should I know beforehand?

It suits web developers who want to start full-stack work with Vue and Nuxt, frontend developers who want to build their own APIs and databases, Nuxt 3 users moving to Nuxt 4, and interested students and IT professionals. You should know basic HTML, CSS and JavaScript and have written some code. No prior Vue experience is needed.

What accounts and software do I need for this course?

Bring a laptop that can run the Node.js LTS release, VS Code and Git, and sign up for free Supabase, GitHub and Vercel or Netlify accounts before the course. Free plans have quotas set by each provider, which are enough for every lab in the course.