Vue JS 2 Tutorial

44 tutorials

All

Tailwind CSS

Build a Static Site with Figma & Astro

Django with HTMX

Node.js Tutorial for Beginners

JavaScript

Python 3 for Beginners

CSS Positioning Tutorial

Canva Tutorials

HTML Tutorial for Beginners

YouTube SEO Tutorial

PSD to Responsive Website

TypeScript Tutorial

Claude Code

Responsive Web Design

PSD to WordPress

GraphQL Crash Course

CSS Animation Tutorial

CSS Flexbox Tutorial

JavaScript ES6 Tutorial

Angular 2 Tutorial

SASS Tutorial

CSS Tips and Tricks

WebSockets (Socket.io) Tutorial

Asynchronous JavaScript

Grunt JS Tutorial

Styling HTML 5 Forms

Webpack Tutorial for Beginners

REST API Tutorial

Vue JS 2 Tutorial

Vuex Tutorial

JavaScript DOM Tutorial

CSS Grid Tutorial

OAuth Login (Passport.js) Tutorial

Django Tutorial

Object Oriented JavaScript Tutorial

#13 Simple Punchbag Game

Build a fun punchbag game to practice Vue fundamentals — combining data, methods, computed properties, events, and conditionals.

#14 Multiple Vue Instances

Create and manage multiple Vue instances on a single page — understand scope, communicate between instances, and know when to use components instead.

#15 Intro to Components

Understand Vue components — reusable, self-contained pieces of UI with their own data, template, and logic.

#16 Refs

Access DOM elements directly with refs — an escape hatch for when you need to interact with the DOM outside of Vue's reactive system.

#17 The Vue CLI

Set up a professional Vue development environment with the Vue CLI — scaffolding, webpack, hot reload, and single-file components.

#18 Vue Files & The Root Component

Understand the structure of .vue single-file components — template, script, and style sections — and how the root App.vue works.

#19 Nesting Components

Import and nest child components inside parent components — build a component tree from reusable pieces.

#20 Component CSS (scoped)

Scope CSS to individual components using the scoped attribute — prevent styles from leaking to other parts of the app.

#21 Nesting Components Examples

Practice nesting components with real-world examples — build a header, footer, and content components to compose a complete page layout.

#22 Props

Pass data from parent to child components using props — the primary way to share data downward in the component tree.

#23 Primitive vs Reference Types

Understand how JavaScript handles primitives and objects — crucial for avoiding bugs when passing data between components.

#24 Events (child to parent)

Emit custom events from child components to communicate with parents — the Vue pattern for upward data flow.