The complete VUE JS course

Explore the options API and composition API in Vue.js and learn how the composition API enables larger, scalable apps, with libraries favoring it; this course uses the compositions API.

Master the basics of Vue.js and learn to install and use Vue via npm packages, running locally in an HTML page with JavaScript in a browser.

Learn to set up a Vue.js app, mount it to the #app div, expose data via setup, and render greetings, booleans, arrays, and objects with double curly braces.

Explore Vue functions by comparing fat arrow and traditional syntax, and learn how the Composition API uses setup over the Options API to create reactive methods.

Explore reactivity in Vue.js using refs and reactive objects to manage and print nested properties, and observe updates after a delay.

Discover how built-in directives power Vue.js by binding attributes with v-bind, rendering dynamic content with v-text and v-html, and sanitizing HTML before rendering.

Apply conditional rendering in Vue using v-if and v-else to display content based on user age, and compare v-show that keeps elements in the DOM.

Explore iterators in Vue.js by looping over arrays and objects using v-for, printing items, accessing indices, and rendering lists such as names, car brands with colors, and object key-value pairs.

Learn how the v-once directive stops re-rendering of a reactive property in Vue.js by displaying the same name twice and updating only one instance.

Explore handling user interactions with v-on events in Vue, including click, double-click, and hover, to update a name and capture mouse x and y coordinates from the event.

Learn to pass arguments to Vue event handlers and access the native event, using built-in modifiers like prevent for form submission and click modifiers for left or right clicks.

Learn to handle mouse and keyboard events in Vue, capture form submissions, and read input values with keyup and modifiers, then explore reactive properties and the ViewModel approach.

Learn to use v-model to bind form data for name and last name to a data object, trim whitespace, and bind checkbox states, then submit via a form handler.

Explore styling in Vue by applying inline styles, dynamic classes with v-bind, and reactive color states using refs, enabling blue, red, and large classes to toggle on click.

Explore dynamic styling in Vue.js using v-bind for classes and inline styles, toggling blue and red, and applying font size and borders. The video introduces computed properties for next lesson.

Explore computed properties in Vue.js with a simple input example and a message function. See how computed getters prevent code from running and isolate the active state; they are read-only.

Learn how to use Vue watchers to react to changes in refs and reactive objects, access new and old values, and watch multiple properties.

Learn how Vue.js shorthand bindings simplify events and properties with @ and :, while v-model remains unchanged.

Learn to install and bootstrap a Vue app with Node.js and npm, create with npm create vue latest, install dependencies, and run npm run dev on localhost 5173.

Create and mount a Vue app by building main.js, importing createApp, and rendering a component into the #app element, using template, script, and style blocks with setup and export default.

Explore building reusable header and footer components in a Vue.js app, using global and local imports, component folders, and a simple layout with header, content, and footer.

Explore the Vue style tag options, including global versus scoped styles and importing CSS files. Apply Roboto fonts and header container styling with scoped rules to improve the app's look.

Share data between parent and child components by binding props with defineProps and reactive data, manage prop names to avoid clashes, and observe updates propagate from parent to child.

Master prop types and validation in Vue by enforcing defined props across child components, with type checks for strings, numbers, and objects and warnings for mismatches.

The lecture explains how to implement custom events by emitting events from a child to update the parent's data, using define emits and parent listeners.

Emit events in Vue to trigger a parent function from a child, expose the function as a prop like say hello, and pass a callback such as update age.

Learn how to validate props in Vue with multiple types, mark props as required, set defaults, and add custom validators to enforce data integrity, then introduce provide and inject.

This lecture explains the props drilling problem in a Vue app and introduces provide and inject as a solution to share data between parent and nested components without excessive props.

Set up provide at the parent level and inject in the child to share data without props. Provide an update function to modify reactive data from the parent and child.

Explore how Vue.js slots enable dynamic content transfer between components, using named slots and reactive data to render lists like car brands from a parent to a child component.

Learn how to implement named slots in a component, use a template with v-slot and named slots like brands and other, and manage the default slot to control content order.

Trace how a Vue component moves from setup through mounting, updating, and destroying, with callbacks for before mount, before update, updated, and unmounted life cycles.

Explore Vue life cycle hooks by wiring on before mount, mounted, on before update, updated, and on before unmount with a live component, demonstrating mounting, updating, and unmounting.

Learn to implement dynamic components in Vue by swapping Mike and Steve components with a shallow ref, achieving tab-like behavior and introducing route-based navigation for multiple pages.

Keep alive preserves component instances to avoid unmounting when switching views. Use on mounted, on unmounted, on activated, and on deactivated hooks and control caching with the include prop.

Learn how to create custom directives in Vue.js, register them globally or locally, and use lifecycle hooks like beforeMount to manipulate the element with binding, modifiers, and reactive values.

Explore the lifecycle of a custom directive in Vue.js, from created and before mount to mounted, updated, and unmount, with DOM access and binding-driven content updates.

Explore local custom directives in Vue.js, creating a directive on the component, accessing binding values and lifecycles like before mount, and comparing local versus global directives for reusability.

Learn to build and validate forms in Vue using the ViewModel and v-model with reactive form data for name, email, subject, and message, including checkboxes and radios.

Bind radios and checkboxes with v-model, manage boolean defaults, and accumulate checkbox selections into an extras array in a Vue form.

Master manual form validation in Vue using a reactive errors array, prevent default submission, and display errors before submitting, with options for ViewModel validation or libraries like validate and Yup.

Install and integrate vee validate, create fields and forms, define rules, and display custom error messages with slots. Submit and reset forms, and compare vee validate to viewmodel approaches.

Explore schema validation with yap in Vue, create a validation schema, define string fields, enforce required and max length, customize error messages, and integrate it into form validation.

Learn to implement transitions and animations in Vue by wrapping elements in a transition component, defining enter and leave classes, and controlling visibility with a reactive display property.

Learn how to name and customize Vue transitions, control enter and leave animations with named transitions, and apply per-element styling using class hooks and keyframes.

Learn to coordinate two Vue components with transitions using mode out-in and keys, ensuring one finishes before the other. Customize transition classes and names such as dog and cat.

Explore how transition hooks run code at each stage of a transition, access the dom element, and use transitions group for lists with practical examples.

Explore how to apply the transitions group to a dynamic list in Vue, using reactive data, inputs, and appear and fade effects to animate adding and removing items.

Install and configure Vue Router in a Vue app, create a router with createRouter and createWebHistory, define routes (home, articles, article, contact), register with app.use, and render via router-view.

Learn how to implement navigation in a Vue.js single-page app using router-link instead of href, customize active classes, and enable programmatic navigation.

Master programmatic navigation in Vue.js by using the router and use route hooks to push routes, read route information, and handle params and query strings.

Explore dynamic routes in Vue router by creating a single article view that uses a dynamic id parameter to fetch and display data from a local database via use route.

Fetch articles from a fake JSON server with Vue, Axios, and router; display lists, navigate by id, and render article content with v-html.

Learn to refetch article data when the article id in the route changes by watching route params and triggering an async load, ensuring the same component updates with new content.

Pass article ids as props in Vue routes, access them with props or route, and implement redirects and a not-found component for unknown URLs.

Learn how to implement nested routes by defining child routes under a parent and rendering them with a router view inside the parent component for articles.

Learn how to use named routes and named views in Vue.js, assign names to components, and render default and secondary components with a reusable route path.

Learn how to use Vue.js global route guards (beforeEach and afterEach) to block navigation for unauthenticated users, redirect to login, and prevent infinite redirects.

Explore per route guard in Vue Router, using before enter and global guards to protect routes, perform authentication and admin checks, and manage route updates and leaves.

Install Pinia, create a centralized store, and connect it to your Vue app; use a counter store with computed properties to access and react to state.

Explore mutating the state with Pinia by updating counters, using patch to alter multiple properties, and observing centralized state across components, with getters, actions, and devtools.

Explore getters in Vue.js: access and derive values from the store state, such as get_count and get_price, return complex objects, and avoid double mutations by aliasing results.

Explore actions that mutate state in a store, including asynchronous actions using axios to fetch posts from JSON placeholder, and manage them with getters and limits.

subscribe to a store, watch mutations and state changes, access payloads and store id, and use patch results; manage unsubscribe and detach to persist subscriptions and handle on action hooks.

Begin a Vue app named game source, set up router and pinia, install dependencies, and integrate firebase for sign in/out, posts management, and an admin layout with article editing.

Configure a Vue.js app with Firebase by creating a project, enabling authentication and Firestore, installing firebase, and initializing a modular firebase.js to export db and auth.

Build a header navigation in a Vue.js app by creating a header component and router links for sign in, logout, and dashboard. Set up routes and the user domain.

Learn to create a Vue authentication form with sign in and register flows, using vee validate with a yup schema, Bootstrap styling, and Firebase integration.

Learn to create a user store with pinyin, integrate Firebase auth and DB, manage a default user state, and use the router for redirects during sign in or registration.

Implement a Vue registration flow by wiring the user store and creating a register action. Store new users in Firebase authentication and Firestore, then redirect to the dashboard on success.

Sign in users teaches building a sign-in flow with email and password, fetching the user profile from Firestore, updating the local store, and navigating to the dashboard with error handling.

Implement toasts in a Vue app with the view toast notification library, register the plugin, and trigger success or error messages from sign-in and register actions via the user store.

Implement auto sign-in in a Vue app using firebase on auth state changed, a composable, and a loading guard to mount the app after a valid session and guard routes.

Implement header navigation in a Vue.js app with authentication-aware links, using a user store to conditionally show sign in, sign out, and access to the dashboard.

Explore route guards in Vue with beforeEnter to enforce authentication using an isAuth composable, redirecting unauthenticated users to sign in and protect dashboard routes.

Set up a dashboard layout and nested routes for user and admin pages, including profile and article management (add, edit with id, show all) with auth protection.

Set up the dashboard layout with a left navigation and central content, implement nested routes and a user store to show dashboard, profile, and articles links based on admin status.

Create a Vue add article form with schema-driven validation, loading states, and database posting. Build fields for game, title, excerpt, editor, rating, and image with a WYSIWYG editor.

Set up the tip tab editor in a Vue 3 project, install dependencies, and create a reusable what you see is what you get article editor with basic formatting.

Build a Vue editor that emits HTML content from the TipTap editor, syncs to a reactive property, and uses a hidden input for validation before posting to Firestore.

Create an articles store in Vue.js and post new articles to Firestore, including the owner’s user data and server timestamp, then redirect and show a toast notification.

Post an article using a Vue.js workflow, manage loading indicators and toasts for success or error, handle Firestore errors, and navigate back to the articles list after submission.

Create an edit article flow by fetching an article by id from Firestore, populating the form fields and wysiwyg editor, and routing not found errors to a 404 with toasts.

Learn to update an article in Firestore by passing the article id and form data, using a doc reference with updateDoc, and handling success or error toasts.

Upload and manage article images with Cloudinary, using the assets and media library to create directories, perform drag-and-drop uploads, and copy public image URLs for articles.

Fetch admin articles in a Vue.js app with Firestore, batch-loading four items and displaying them in a table. Manage loading state and last visible for load more and reload routing.

Build and display an admin articles table in a Vue.js app, with loading progress, dark table showing article name, owner, date, rating, and actions to edit or delete via router.

Create a load more admin articles feature using an async action to fetch the next articles from Firestore with start after last visible and merge with existing articles.

Remove articles by id in a Vue.js admin interface, deleting from Firestore and updating the local admin articles state with a filtered list, plus toast feedback and error handling.

Fetch home articles with a limit of eight ordered by timestamp descending, and render them in a container using a home carousel and featured posts view with Vue 3 carousel.

Create a responsive home carousel in a Vue.js app by fetching featured slides from the article store, binding image, title, and excerpt to slides, and adding pagination.

Create home featured article cards using a Vue store getter, fetch home articles, and render VCard components with title, subtitle, and excerpt, linking to an article by ID.

In the article view, this Vue.js lesson loads an article by id from route, then renders its image, title, author, HTML content, and rating.

Learn to build a profile update flow in Vue with a composable that handles first name and last name, validates with Yup, updates Firestore, and syncs with the user store.

Learn to implement an update profile action in the user store using Firebase to update user docs by id, manage form data, and reflect changes with toasts.

configure firebase firestore rules to secure data with authentication and admin checks, define user-specific read/write access, and deploy the application to firebase.

deploy a vue.js app to firebase hosting by installing the firebase tools, logging in, configuring hosting, building the dist directory, and deploying with firebase deploy.

Create a Nuxt app in the integrated terminal with npm create, then review package.json, Nuxt config, app directory, and app view, and run npm run dev to see routing.

Explore how Nuxt automates route creation by mapping the file system to pages and generating routes behind the scenes, eliminating manual Vue Router setup.

Create a pages directory and add index.vue as the home to enable routes in Nuxt, then add contact.vue and restart the server to fix hydration issues.

Explore constructing nested routes in Nuxt by organizing views into users, profile, and age directories, and learn how to create index and view files for better organization.

Learn how to implement dynamic routes in Nuxt to load user profiles by ID, using square-bracket slugs, nested directories, and params, and handle hydration errors.

Access dynamic route params using the route object or the use route function in setup to retrieve id and name. The lesson covers console logs and server-side rendering.

Build catch-all dynamic routes by creating a [..slug] directory under cars, render a cars page for any path, and access the slug as an array from route.params.name in the script.

Learn to implement SEO and meta tags in Vue using use head and use SEO, manage title and description, add links, and understand OG tags and page metadata.

Learn to declare page metadata with define page meta in Nuxt, set titles and meta descriptions, and use head for reactive properties as you prepare for layouts.

Create a layouts directory to define a default layout with a content slot, then assign and switch layouts for pages using define page meta and set page layout.

Learn to implement navigation in a single-page Vue.js app using the next link component, create a nav with home and contact links, and programmatically navigate with useRouter.

Explore how Nuxt registers components automatically from the components directory, create nested components like users/profile, and use prefixes or imports to render them in views.

Configure nuxt using nuxt.config.ts to disable the components path prefix, understand auto importing, and learn to use a custom components directory with manual imports when needed.

Explore styling options in Vue/Nuxt, using scoped or global styles, importing assets/main.css, and configuring global CSS in Nuxt config, plus loading external styles like Bootstrap with use head.

Learn to add external and local fonts with font-face and roboto, place fonts in public, and set up sass via npm install -D sass.

Learn how global middleware runs on every route in a Nuxt-style app, using global.js with two and from, path, and navigateTo to redirect or abort.

Create a named middleware file and add its name to the page meta middleware array to run with global middlewares, and define a local middleware on the page.

Explains how to use composables in Vue.js, showing how to create a Composables directory and a getUsers composable that exposes loader, names, and addUser for template use.

Learn how Nuxt exposes composables at the root and how nested directories become inaccessible, then create an index.js to re-export and make all composables available.

Explore how the utils directory stores small reusable functions, exports utilities, and auto-imports in Nuxt.js, including a random number generator and a random name function.

Explore how plugins extend Vue and Nuxt apps by registering global utilities, functions, and components through a plugins directory, with examples of providing red and blue values at startup.

Learn to customize the Nuxt 404 page by creating error.vue, using error props to show status codes and messages, and applying a layout for consistent styling across server and client.

Create a Nuxt template by scaffolding a project, installing bootstrap, and configuring the server side. Build a minimal app with pages, layouts, and routes for employees, add employee, and edit.

Explore the Nuxt lifecycle by comparing server-rendered html with client hydration for pre-built, seo-friendly pages. See how server and client work together via routes and middlewares to enable dynamic interactions.

Learn to set up a local json-server fake api to perform get, put, patch, and delete on a db.json database, with port 3004 and npm scripts for convenience.

Explore how to fetch data in Nuxt using three methods: fetch, useFetch, and useAsyncData; compare server-side and client-side behavior, and render employees as Bootstrap cards with detail links.

Create and organize a server directory at the project root to house api routes, server routes, middleware, plugins, and utils, enabling server side code in Nuxt for the Vue app.

Learn how to create and test API routes as endpoints in a server API, handling get and post requests with the event object and fetch, and exploring different http methods.

Learn to build API routes for employees in Vue, create API/employees with get and post handlers, and switch from useFetch to server-side fetch for responses.

Create an add employee form in Vue.js that posts its data to an api route, using a Vue.js form data object with fields for full name, position, and age.

Learn to post new employee data to an API using fetch, building a form data body and handling the response, including parsing the request body and query parameters.

Post employees to a json server using fetch, build request body, and use try-catch to handle responses, with client and server validation and errors such as name is too short.

Compare api routes and common routes in routes directory, noting no difference beyond api keyword, and demonstrate with a hello.js route using export default defineEventHandler and a fetch from home.

Explore server middleware in the Nuxt project, building a logger and an auth check that reads cookies, validates tokens, and exposes user context across requests.

Explore how Nitro plugins extend the server with hooks such as request, before and after response, and error handling, using the plugins directory to access the Nitro app and context.

Export an async get employees function in utils, fetch data, handle errors, and expose the result to the server for use by plugins and other server parts.

Learn how H3 enables server-side operations in Nuxt, including get cookie and set cookie functions, and discover the official H3 docs to access server-side methods.

Create a dynamic id route for editing an employee, fetch the employee data from the API by id, and populate the form with v-model, using watchEffect to update fields.

Patch an employee by id in a Vue.js app through an API, using an async patch request with body data, query id, and update confirmation after reload.

Fetches an employee by id from the server using the route param, shows loading and errors, displays full name and position, and enables editing or deleting the employee.

Delete an employee by id via a dedicated endpoint using a delete request with the id in the body, with try-catch error handling and UI integration.

Explore prerender in Nuxt by building and generating a static version of your SSR app, producing routes in the output/public and testing with a static server.

Explore prerendered static versions' limits for API updates and server routes, and learn to switch to a non-static server and client version by building with npm run build and preview.

Explore building a Nuxt-style app with npm run build, then preview or run a production server on localhost:3000. See how server and client routes render, API updates, and pre-render configurations.

Explore pre-render configurations in Nuxt, selecting routes to static render for improved performance. Understand static versus dynamic content, testing updates, and when to pre-render the home route.

Explore route rules to enable pre-rendering of specific pages, using nitro's inline route rules for home, building a static version, and comparing build, generate, and experimental inline pre-render options.

Explore Nuxt modules to extend your app with official module resources, install and configure plugins like a sitemap, and generate dynamic urls from your data, especially with Nitro.

Learn how nuxt link prefetches data by default to reduce loading times, with options for interaction or visibility triggers. It also shows disabling prefetch per link and globally via next.config.js.

Learn how to implement lazy loading for Vue components using dynamic import, contrasting it with Nuxt's eager loading, and toggle visibility to lazy load the about us component.

Learn to add and optimize images in a Nuxt app by using the images directory, installing the Nuxt image module, and switching to Next image for format and quality control.