How to use Vue devtools with Vue 3?

The README links to both stable and beta Vue devtools Chrome extensions; install the beta version for Vue 3 compatibility and ensure your app is in development mode for proper inspection.

What's the difference between Vue 2 and Vue 3 for beginners?

Vue 3 introduces the Composition API, better TypeScript support, and performance improvements. This course focuses on Vue 3, with older Vue 2 materials available in a separate directory.

How to set up Vue CLI for a new project?

While the course mentions Vue CLI in slides, it recommends CodePen for quick starts. For local setup, refer to Vue CLI documentation or watch the lecture for guidance on build processes.

Is this course good for learning Vuex?

Yes, it includes a slide deck on Vuex and resources in the Vuex section, but note that since Vue 3, Pinia is often recommended as an alternative, which may not be covered here.

Can I use these materials without a Frontend Masters subscription?

The repository materials like slides and examples are freely accessible with the provided password, but the full video course is behind a Frontend Masters paywall.

How to practice Vue.js on CodePen?

Fork one of the CodePen collections linked in the repository, which include pre-configured pens with Vue, SCSS, and Babel for instant coding without local setup.

Intro to Vue, repo for Frontend Masters Course

Vue

Workshop materials and examples for learning Vue.js 3, including slides, code examples, and development tools.

Visit Website

What is Intro to Vue, repo for Frontend Masters Course?

sdras/intro-to-vue is a repository containing workshop materials for the Introduction to Vue.js 3 course on Frontend Masters. It provides slides, code examples, and development resources to help learners understand Vue.js fundamentals and advanced features. The materials are designed to reduce setup time and facilitate hands-on learning.

Target Audience

Developers and students who are new to Vue.js or transitioning from Vue 2 to Vue 3, looking for structured learning materials with practical examples.

Value Proposition

It offers a comprehensive, ready-to-use collection of resources from an authoritative instructor, including slides, examples, and tool recommendations, making it easier to start learning Vue.js without extensive configuration.

Overview

Workshop Materials for my Introduction to Vue.js Workshop

Use Cases

Best For

Learning Vue.js 3 fundamentals through structured workshop materials
Finding code examples for Vue.js directives, components, and state management

Related Projects

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub

GitHub

2.8k stars578 forks0 contributors

Accessing slide decks for teaching or self-paced Vue.js education

Setting up a development environment with recommended Vue.js tools and extensions

Practicing Vue.js concepts using CodePen without local setup

Transitioning from Vue 2 to Vue 3 with updated resources

Not Ideal For

Developers seeking the latest Vue.js features and updates beyond the 2020 course materials
Teams needing production-ready application templates or boilerplates with modern tooling
Learners who prefer interactive, video-based tutorials over static slides and code snippets
Projects requiring offline development or local setup without reliance on external platforms like CodePen

Pros & Cons

Pros

Structured Learning Path

Slides systematically cover Vue.js 3 from basics like directives to advanced topics such as Composition API and Vuex, providing a clear progression for learners.

Minimal Setup Required

Emphasizes using CodePen for immediate coding without local configuration, reducing setup time and allowing focus on core concepts as stated in the README.

Expert-Curated Resources

Includes recommended tools like Vue devtools and VS Code extensions, curated by Sarah Drasner, an authoritative instructor in the Vue community.

Practical Code Examples

Offers basic examples of Vue techniques to help students get started quickly, minimizing the need for external research during learning.

Cons

Potentially Dated Content

Materials were updated in 2020 for Vue 3 release and may not cover newer ecosystem developments like Pinia or Vue 3's later features.

External Platform Dependency

Heavy reliance on CodePen for exercises might not suit learners preferring local development environments or those needing offline access.

Static Learning Format

Primarily consists of password-protected slides and code snippets, lacking interactive tutorials or built-in coding challenges for hands-on practice.

Frequently Asked Questions

Home

Vue.js

Help you learn more efficiently vue3 source code - mini-vue

实现最简 vue3 模型( Help you learn more efficiently vue3 source code )

Stars10,591

Forks2,260

Last commit2 years ago

Vue.js debugging in Chrome and VS Code

VS Code Recipes is a curated collection of guides and examples demonstrating how to configure and use Visual Studio Code's debugging capabilities with specific technologies, frameworks, and tools. It helps developers set up efficient debugging workflows across different stacks without needing to search through scattered documentation. ## Key Features - **Multi-technology coverage** — Recipes for Angular, React, Vue.js, Node.js, Python, PHP, Ruby on Rails, and more. - **Framework-specific debugging** — Step-by-step guides for debugging apps built with CLI tools like Vue CLI, Angular CLI, and Next.js. - **Testing integration** — Debugging configurations for Mocha, Jest, and other testing frameworks. - **Runtime environments** — Recipes for debugging Electron apps, AWS Lambda functions, and Emscripten-translated code. - **Live editing workflows** — Examples for live-editing and debugging React apps directly within VS Code. ## Philosophy VS Code Recipes follows a practical, example-driven approach to help developers quickly implement debugging setups tailored to their specific technology stack, reducing trial-and-error and improving productivity.

Stars5,961

Forks600

Last commit24 days ago

讲解 Vue.js 官网中文-含代码、百度云、youtube

(vue.js official website tutorials ，contains video , codes, baudi yun, youtube) 网路上有很多 VUE 综合应用的视频，但大部份的视频，都当你已经了解官网所以讲的节奏难免偏快。此视频(都是上代码)，以官网为重，将官网的观念，以视频搭配代码，实际演示。如果官网有看不懂的地方，比对一下，视频跟代码，就会了解了。减少你摸索的时间。(註：mvvm 的框架，不管是 ng , react, vue, avalonjs, 都是好的框架，而有经验的前端，至少都会两套以上的 mvvm。)

Stars1,958

Forks467

Last commit9 years ago

#code-examples

#vue-js

#javascript-framework