Vue 3 Fundamentals | Beginners Guide 2023

Learn what Vue is as a front-end framework for single-page applications, how client-side rendering works with the Vue router, and the search engine optimization trade-offs and ssr options like Nux.

Discover why Vue outperforms vanilla JavaScript by enabling dynamic data-driven apps, leveraging the virtual DOM for efficient updates, using directives, and building reusable components in a lightweight framework.

Choose Vue for its learning curve and closeness to HTML, CSS and JavaScript, and tap into Vue 3's community and official libraries like Vue router and Pinafore State management.

Explore how a single file component encapsulates HTML, CSS, and JavaScript in one file with script, template, and style sections, and see a navigation component that controls a mobile menu.

Access the dedicated GitHub repository with branches for each section, plus starting files and completed project, so you can reference the code for any section via the dropdown.

Start generator review project using the view build tool: create a folder named view to dos, open it in VS Code, run npm init view at latest, then npm install.

start the local development server with npm run dev, inspect main.js and the composition api setup, and see how createApp, mount, and router-view power a single-page app.

Explore the Vue project structure, including assets and components folders, and learn how props and slots pass data and template content between components, plus basic routing and views.

Delete assets and components to clean Vue 3 Fundamentals project. Remove the welcome component from the home view, header from the API view, and reset styles to a fresh template.

Install uid for unique IDs, sass for styling, and iconify for icons using npm install --save-dev in the project folder, then verify them in package.json devDependencies.

Set up global styles in the app view file using Sass, import the Rubik font from Google, and copy reset and container styles from a GitHub repository to streamline styling.

Create a navigation component in a Vue 3 app by building a to-do header and integrating router-link with home and about routes, applying scoped styles.

Create a todo creator component in a Vue 3 app, wiring an input with v-model to a reactive data state and comparing ref and reactive approaches.

Learn to emit a custom create todo event from a todo creator in Vue 3, and listen in the parent to update the todo list.

Learn to validate to-dos in Vue 3 by using reactive to-do state, preventing empty entries, clearing the input on create, and toggling error messages with v-show or v-if.

Use slots to pass template content into a reusable Vue 3 button component, enabling dynamic text with a slot and a fallback content option.

Build a reusable todo item component in Vue 3, render todos with v-for, pass a todo object as a prop with object syntax, and manage editing and completion with icons.

Learn to implement a complete to-do in Vue 3 by toggling isCompleted with a checkbox, emitting a toggle event from the item, and updating parent list with strikethrough when completed.

Enable editing of a to-do item by clicking the pencil icon, emitting edit and update events from the child component, and updating the todo in the parent.

Learn how to delete a todo by emitting a custom delete-todo event with the todo id, using defineEmits, and filtering the list to remove it.

Learn to save and retrieve to-dos in a Vue 3 app using local storage, setItem and getItem, and JSON.stringify/parse to populate the list on load.

Learn how to use vue 3's watch to monitor a to-do list array, and trigger local storage updates with deep property tracking.

Learn to display a completion message for all to-dos in a Vue 3 app using a computed property with a getter and the every method on a reactive to-do list.

Learn how to create a new route by defining path, name, and component, and use lazy loading to load the route as a separate JavaScript chunk for better performance.

Learn to deploy a Vue 3 application to Netlify by connecting a GitHub repository, pushing code, and importing the project to deploy the site.

After wrapping up the Vue 3 fundamentals crash course, start small and expand the project by adding features like drag to reorder todos and day-specific lists.