> Markdown version of [/playlists/vue](https://www.wearedevelopers.com/playlists/vue). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md). --- # Playlist: Vue 17 videos · 26 moments · 88.1 minutes ## petite-vue - Progressively enhancing every application? - **Defining petite-vue and its architectural differences** (09:43, 1min) — The creation of an ultra-lightweight frontend layer relies on walking the existing DOM instead of employing a heavy virtual tree. - **Question and answer session on syntax and compatibility** (36:10, 8min) — Exploring specific syntax compatibility and older browser limitations guarantees long-term stability when attempting deployments targeting legacy e... - **Hooking into element lifecycles without virtual DOM events** (18:59, 1min) — Developers can execute custom actions by listening for mounting and unmounting events directly on standardized markup elements. [Learn more](https://www.wearedevelopers.com/videos/542-petite-vue-progressively-enhancing-every-application) ## Vuejs and TypeScript- Working Together like Peanut Butter and Jelly - **Configuring Vue single-file components with TypeScript** (14:14, 3min) — How single-file Vue components leverage the TypeScript execution context alongside scoped CSS and HTML templates. - **Initializing a new Vue application via the CLI** (05:06, 1min) — How to use the Vue CLI to scaffold a new project and select features like Babel, TypeScript, and routing. - **Generating definitions for untyped Vue plugins** (33:32, 4min) — Running the TypeScript compiler in declaration mode to auto-generate a starter typings file for legacy Vue-compatible packages. - **Comparing Vue to React and Angular** (02:06, 2min) — An overview of why Vue optimizes for developer productivity compared to Angular's tooling focus and React's complex state capabilities. [Learn more](https://www.wearedevelopers.com/videos/127-vuejs-and-typescript-working-together-like-peanut-butter-and-jelly) ## Under The Hood of Vue 3 Reactivity - **Core JavaScript structures powering Vue reactivity** (03:41, 5min) — Addressing previous property interception limitations, newer framework structures leverage ES6 proxies over static object definitions to intercept ... - **Core concepts of reactivity and the observer pattern** (01:09, 2min) — Automating UI updates requires an observer pattern to passively listen and notify dependent logic properties when arbitrary values shift. [Learn more](https://www.wearedevelopers.com/videos/228-under-the-hood-of-vue-3-reactivity) ## Extending HTML with Web Components - **Integrating web components across popular javascript frameworks** (32:03, 5min) — Embedding custom elements consistently inside Vue, Angular, React, and Svelte applications without rewriting code. [Learn more](https://www.wearedevelopers.com/videos/459-extending-html-with-web-components) ## WeAreDevelopers LIVE - Whats Nuxt and Next for app development, 20 years AJAX and more - **Core features of the Nuxt meta-framework for Vue** (00:04, 4min) — Implementing a meta-framework on top of Vue streamlines full-stack development and server-side rendering configurations. [Learn more](https://www.wearedevelopers.com/videos/1306-wearedevelopers-live-whats-nuxt-and-next-for-app-development-20-years-ajax-and-more) ## Under The Hood Of Vue 3 Reactivity - **Fundamental concepts of Vue 3 reactivity and Observer pattern** (02:57, 2min) — The basic mechanisms of tracking changes and notifying subscribers using the Observer pattern. - **Constructing the reactive wrapper to automate tracking operations** (28:26, 4min) — Combining custom track and trigger logic into a dynamic proxy interface to create the core reactive function. [Learn more](https://www.wearedevelopers.com/videos/539-under-the-hood-of-vue-3-reactivity) ## TresJS a new declarative ThreeJS as Vue components - **Building three-dimensional web experiences using framework components** (00:02, 1min) — Recreating virtual scenes declaratively provides an intuitive architectural pattern to manage complex visual logic. [Learn more](https://www.wearedevelopers.com/videos/543-tresjs-a-new-declarative-threejs-as-vue-components) ## Lessons learned from building a thriving Vue.js SaaS application - **Choosing Vue and GraphQL for strong typings** (03:21, 1min) — How deploying Vue and GraphQL simplifies developer onboarding while enforcing strict end-to-end type safety between the client and server. - **Structuring and importing predictable, side-effect free composables** (10:22, 3min) — Specific rules for organizing Vue logic elements with explicit barrel files and safe function definitions that preserve predictable compiler tree s... - **Building reusable robust UI-agnostic data fetching composables** (13:52, 2min) — Architecting component functions that seamlessly encapsulate API queries, resilient GraphQL subscriptions, and local offline mappings without assum... [Learn more](https://www.wearedevelopers.com/videos/1666-lessons-learned-from-building-a-thriving-vue-js-saas-application) ## To New Frontiers: The Future of Frontend Development - **Dominance of the big three frontend frameworks** (02:31, 1min) — Angular, React, and Vue have established unprecedented longevity and industry adoption. [Learn more](https://www.wearedevelopers.com/videos/404-to-new-frontiers-the-future-of-frontend-development) ## Unleash your web skills on native! - **Building applications using popular JavaScript component frameworks** (18:26, 7min) — Integrating libraries like Angular and Vue while seamlessly invoking underlying Objective-C platform actions. [Learn more](https://www.wearedevelopers.com/videos/122-unleash-your-web-skills-on-native) ## Lynx: Native for More - **Democratizing cross-platform development with alternative JavaScript frameworks** (28:22, 2min) — Expanding accessibility beyond React by adapting the underlying engine to diverse language ecosystems like Vue and Svelte. [Learn more](https://www.wearedevelopers.com/videos/1445-lynx-native-for-more) ## Modern Web Development with Nuxt3 - **Introduction to modern web development with Nuxt two** (00:02, 2min) — Nuxt acts as an intuitive framework built upon Vue to simplify the overall modern web development stack. [Learn more](https://www.wearedevelopers.com/videos/294-modern-web-development-with-nuxt3) ## Next, Nest, Nuxt… Nust? - **Implementing server-rendered Vue apps using the Nuxt framework** (15:55, 1min) — Utilizing Nuxt to bring pre-configured server-side rendering and static generation capabilities to the Vue ecosystem. [Learn more](https://www.wearedevelopers.com/videos/421-next-nest-nuxt-nust) ## Building for the Edge - Crafting a Next-Gen Framework - **Integrating components for server-side rendering and application routing** (09:20, 6min) — Configuring bundler plugins to process component files and utilizing memory history for backend endpoint routing. [Learn more](https://www.wearedevelopers.com/videos/638-building-for-the-edge-crafting-a-next-gen-framework) ## Bringing back reactivity in "reactive" frontend - **Comparing derived state primitives across modern JavaScript libraries** (07:16, 0min) — How react, vue, rxjs, and solid each handle base state declarations and derived computations. [Learn more](https://www.wearedevelopers.com/videos/1034-bringing-back-reactivity-in-reactive-frontend) ## Get started with securing your cloud-native Java microservices applications - **Cloud native starter project architecture** (02:51, 2min) — Overview of a basic cloud-native architecture combining Vue front ends with reactive security. [Learn more](https://www.wearedevelopers.com/videos/123-get-started-with-securing-your-cloud-native-java-microservices-applications) ## Enhancing Developer Experience During Architecture Modernization - **Modernizing legacy architecture and framework migration challenges** (00:00, 3min) — Unseen framework upgrades like moving to Vue 3 are often undervalued by the business despite major developer effort. [Learn more](https://www.wearedevelopers.com/videos/1174-enhancing-developer-experience-during-architecture-modernization)