VueHarbor

Tutorials

Latest Tutorials

Gallery

Snapshots from our hands-on Vue tutorials and projects.

A laptop displaying a dual-screen setup with coding scripts on one side and a YouTube video on the other. The scripts are in a code editor, while the YouTube side shows a video tutorial about using the Fetch API in JavaScript. There are multiple tabs open, and a file explorer is visible.
A close-up view of a laptop screen displaying lines of JavaScript code, with the keyboard partially visible at the bottom. The code is reflected on the screen, creating a layered visual effect. The environment appears dark, contributing to a focused atmosphere.
PHP code is displayed on a dark-themed text editor, featuring HTML tags and PHP functions. The code handles the retrieval and display of posts, with conditional statements and template inclusion.
A computer screen displaying a dark-themed text editor with code in various colors. The left side shows the interface of a web inspector or development tool, with some unreadable elements beside the code. The background appears blurred with faint details of another screen or window.
A laptop is placed on a light wooden table, displaying a code editor with PHP code. The screen shows the directory structure on the left and code written in the main editor area on the right.

Simple Todo

A computer screen displays various sections of code written in JavaScript. The code includes module exports and HTML tags within a text editor interface, which is divided into several panels. The text editor panel exhibits a dark theme with syntax highlighting, showing functions and variables.

Weather App

Build a weather app that fetches live data and updates reactively using Vue’s Composition API.

A smartphone displaying the word 'Blog' on its screen is placed on a surface with alternating black and white diagonal stripes. The phone's screen is easily readable and prominently features the text in bold.

Recipe Finder

Create a recipe search tool that filters results dynamically as you type, showcasing reactive state.

A computer screen displays a code editor with various files in a directory. The code being edited is written in JavaScript, identifiable by the .js file extension. There are highlighted lines in different colors to distinguish syntax elements. The left pane lists files such as 'assets', '.env', and 'index.js'. A web browser is visible at the top of the screen with multiple open tabs.

Chat Widget

Develop a lightweight chat widget demonstrating component communication and real-time updates.