Welcome

In the last video of this series, we saw our first example of a Vue Single File Component (SFC) via the file src/App.vue.

The idea with Single File Components is to organize together all the JavaScript, HTML, and CSS of a specific entity or component of your application into one file. Within the JavaScript, you will define all the Vue options (data, computed properties, methods, watchers, etc.) necessary for that component, and each component will be set up as its own Vue instance.

⭐ NOTES ⭐
https://codewithsusan.com/notes/vuejs-simplified/13-single-file-components?r=yd

📺 Vue.js Simplified series playlist 📺
https://youtube.com/playlist?list=PLKPbe83DUccF3aCuuE0QJjemYMzTZ6l5n

⏱️ CHAPTERS ⏱️
00:00 Introduction - Utility of SFCs
01:30 Converting FlashWord word cards into a component
01:50 Naming conventions
03:25 SFC structure
03:40 Scoped CSS
04:09 HTML template
04:30 JavaScript
06:10 Component specific options: name and props
07:10 Using WordCard component in App.vue
08:27 Passing prop data with v-bind
08:50 Misc. modifications
09:58 Pull in CSS
10:40 Test it out...
11:40 Fixing global feedback functionality
12:30 Updating parent component’s data with custom events
15:15 Wrap-up

Open in YT Studio View on YT

Learn how to set up VS Code for remote development using SSH. In this guide, you'll connect VS Code to a remote Linux server (VPS) and work directly on that server as your development environment.

⭐ Notes: https://codewithsusan.com/notes/remote-development-with-vscode?r=yd

Topics covered:
• Installing the VS Code Remote SSH extension 
• Creating a virtual private server (DigitalOcean example) 
• Connecting via SSH 
• Editing files on the remote server 
• Installing extensions remotely 
• Fixing connection timeout issues 
• Optimizing performance on low-RAM servers 
• Using swap files for smoother remote development

This setup allows you to develop on a remote server instead of your local machine which is ideal for web apps, backend projects, staging environments, or production-like testing.

⏱️ Chapters
00:00 Why Remote Development?
00:59 VS Code Remote Extensions
02:28 Creating a VPS (DigitalOcean)
04:22 Testing SSH Connection
05:26 Configuring SSH for VS Code
07:46 Working on the Remote Server
10:23 Installing Extensions Remotely
12:22 Fixing Timeout Issues
13:57 Using a Swap File
15:22 Securing Public Development Servers

Open in YT Studio View on YT

Demo Dashboard