#vue
SubscribeVue is an open-source JavaScript framework for creating user interfaces and single-page applications. It was created by Evan You in 2014 and has quickly become one of the most popular frameworks for web development. Vue allows developers to create dynamic, reactive user interfaces using a component-based structure. It provides a number of features such as data binding, components, routing, state management, and server-side rendering. Vue can be used to develop both large and small applications, making it an ideal choice for any project.
10 Years of Independent OSS: A Retrospective
JSNation 2024
33 min
10 Years of Independent OSS: A Retrospective
This talk is a ten-year retrospective into the growth of the Vue.js framework as an open-source project. It highlights the challenges faced by open-source developers, the importance of finding balance and managing scope, and the collaborative nature of the Vue community. The talk also discusses the development of Vite as a build tool and the vision for a unified JavaScript toolchain. It emphasizes the need for community alignment, contributions, and testing, while acknowledging the challenges of bad actors in the open-source community.
Building a Better Hammer - The Story of Nuxt 4
Vue.js Live 2024
28 min
Building a Better Hammer - The Story of Nuxt 4
Nuxt is a framework for building web apps using Vue and Nitro, driven by a vibrant open source community. Nuxt 4 aims to make the framework more usable and extensible, while focusing on collaboration rather than competition. The modules ecosystem and pluggable architecture enhance Nuxt's functionality and customization options. Nuxt prioritizes user choice and aims for stability and reliability. Nuxt 4 introduces thoughtful breaking changes and is eagerly anticipated by the community.
10 Years of Vue: the Past and the Future
Vue.js Live 2024
29 min
10 Years of Vue: the Past and the Future
Hello everyone and welcome to Vue.js Live 2024. In this Talk, Evan Yew, the creator of Vue and Vite, shares a 10-year retrospective on Vue.js, discussing its history, technical impact, and how it is being kept alive. Vue has made significant contributions to the JavaScript ecosystem and is the only mainstream framework that remains independent. The latest release, Vue 3.4, introduced performance improvements and a more efficient reactivity system. Future plans include reactivity efficiency improvements, stabilizing reactive props, and exploring vapor mode. Vue is here to stay and will continue to support the community.
Making Magic: Building a TypeScript-First Framework
TypeScript Congress 2023
31 min
Making Magic: Building a TypeScript-First Framework
Top ContentDaniel Rowe discusses building a TypeScript-first framework at TypeScript Congress and shares his involvement in various projects. Nuxt is a progressive framework built on Vue.js, aiming to reduce friction and distraction for developers. It leverages TypeScript for inference and aims to be the source of truth for projects. Nuxt provides type safety and extensibility through integration with TypeScript. Migrating to TypeScript offers long-term maintenance benefits and can uncover hidden bugs. Nuxt focuses on improving existing tools and finds inspiration in frameworks like TRPC.
Nuxt on the Edge
Vue.js London 2023
30 min
Nuxt on the Edge
Nuxt is a web framework with many features including server-side rendering, client-side rendering, static site generation, edge site rendering, and more. The Edge is a limited environment running on CDN nodes, such as Cloudflare network. Database options on the Edge include Postgre with Neon, Versel on Neon, Superbase, MySQL with plan scale, HyperDB, and KV with redis and Cloudflare storage. The speaker demonstrates creating a demo with a votes table, handling API requests, adding authentication, saving votes, and displaying results. The roadmap to a full stack Nuxt 3 with an edge-first experience is in progress. Copilot is a helpful tool for developers. Integrating SSO with GitHub and improving the developer experience are important considerations for Nuxt 3.
TresJS, a declarative way of creating 3D scenes from Vue components
Vue.js London 2023
27 min
TresJS, a declarative way of creating 3D scenes from Vue components
The speaker discovered 3D with 3GS and was inspired to create a 3D ecosystem for the Vue community using Troy.js. The process of setting up a 3D scene and objects in Tress was explained, along with creating and configuring 3D objects. The talk also covered animating objects with Tress and the 'Cientos' package, as well as the future of Tress.js and its compatibility with older versions of Three. The speaker expressed gratitude to sponsors and contributors and highlighted the potential for product customization with Tress.js.
Vue: Feature Updates
Vue.js London 2023
44 min
Vue: Feature Updates
Top ContentThe Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Local State and Server Cache: Finding a Balance
Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top ContentThis Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.
Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top ContentIn this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top ContentState management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Welcome to Nuxt 3
Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top ContentNux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
One Year Into Vue 3
Vue.js London Live 2021
20 min
One Year Into Vue 3
Top ContentVue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
6 Levels of Reusability
Vue.js Live 2024
23 min
6 Levels of Reusability
Today's Talk explores the concept of reusable components, focusing on levels of reusability such as inversion, extension, and nesting. Props are discussed as a means of achieving flexibility and configuration in components. Inversion of control and scoped slots are introduced to give components adaptability. Extension points provide the ability to override specific parts of an application within a single component. The Talk also covers the use of slots and nesting for component flexibility and reusability.
Scalable Forms in Vue
Vue.js Live 2024
23 min
Scalable Forms in Vue
Scalable forms in Vue, approachable for all skill levels, with code reusability and best practices. Front-ends divided into websites and applications, with forms being highly interactive and logic-heavy. Form Components in Vue provide accessible markup, delightful validation, and customizable props. Using vModeling encourages code reuse and collaboration. FormKit offers a comprehensive solution to form problems, including structured data, unique form keys, and robust validation UX. It simplifies form creation, supports CMS-like experiences, and provides advanced features and TypeScript support.
PrimeVue | The Next-Gen UI Component Library
Vue.js Live 2024
24 min
PrimeVue | The Next-Gen UI Component Library
Prime Vue is a comprehensive UI component suite with over 90 components, including date pickers, buttons, tables, and grids. It offers flexibility through styled and unstyled modes, allowing for customization using design tokens or Tailwind. Prime Vue is WCAG compliant and supports Material design. The upcoming version 4 introduces a new theming API using CSS variables, and it includes features like dark mode switching and integration with Figma. The team has plans to release a UI Designer, advanced components, and a drag-and-drop UI Builder in the future.
What's Hot On Tresjs V4
Vue.js Live 2024
20 min
What's Hot On Tresjs V4
Threads.js, a Vue custom renderer for creating declarative 3D scenes, has gained popularity with over 1,700 GitHub stars, 9K monthly NPM downloads, and a strong developer community. Version 4 introduces performance improvements, on-demand rendering, typing support, and memory management. Event bubbling and primitive creation are key features, along with enhanced memory management and scene inspection capabilities. The roadmap includes translated documentation, a new cookbook, and the launch of post-processing and XR VR packages. Performance enhancements, a new 3D course, and updates to Tres Leches UI library are also in the works.
Who Are Vue? Authn In Vue, The Important Parts
Vue.js Live 2024
23 min
Who Are Vue? Authn In Vue, The Important Parts
This Talk introduces authentication in Vue.js and emphasizes that it is not as difficult as it may seem. The speaker explains the concept of authentication and its importance. A code example is used to demonstrate how to implement authentication in Vue.js, including separate UI parts for login, home, and dashboard views. The Talk also covers handling authentication in the Vue.js router, including defining routes, accessing user credentials, and making requests to the backend.
The Swiss Army Knife of Every Vue Developer
Vue.js Live 2024
9 min
The Swiss Army Knife of Every Vue Developer
Composables are the Swiss Army knife of every Vue.js developer, helping build more extensible, adaptable, controllable, and trustful applications. They replace mixins and can be used everywhere, connecting different parts of the system and sharing common state. Composables are versatile, allowing for local or global use, and can be applied in both the domain layer and UI. They provide adaptability, controllability, easy testing, and eliminate the need to test the environment. Consider using Vue use for a library of composables and start building your own collection.
Learning To Learn : How To Web Dev The Right Way With Vue If You Are A Beginner
Vue.js Live 2024
8 min
Learning To Learn : How To Web Dev The Right Way With Vue If You Are A Beginner
Knowing JavaScript is essential for getting started with Vue. Understanding the fundamentals of Vue and building on individual concepts will help you develop more complex applications. Don't fall into the trap of building something too big as a starter project. Focus on the fundamentals and don't be swayed by industry standards or tricks posted online. Find a mentor to guide your Vue journey.
Data Loaders - Elevating Data Fetching in Vue
Vue.js Live 2024
30 min
Data Loaders - Elevating Data Fetching in Vue
Data loaders provide a solution for complex and repetitive data fetching in Vue.js applications. Using data loaders allows for more independent data fetching and integrates with the navigation cycle. The data loader plug-in adds a navigation guard for data fetching and loading. Lazy loading and caching can be implemented using Pina Colada and Glada loaders. These loaders can improve the performance and speed of data fetching in applications.
Domain Driven Design with Vue Applications
Vue.js London 2023
14 min
Domain Driven Design with Vue Applications
Top ContentWelcome to this talk on domain-driven design in Vue.js application. Today we are going to look into domain-driven design, its benefits and how it works with Vue.js domain-driven design versus the MVVM model. Vue.js thrives in domain-driven design, a design approach that models software to match a domain. DDD emphasizes understanding business logic and creating a domain that reflects the language and concepts. Integrating DDD in Vue.js offers benefits such as effective modeling of complex business domains, structured code reflecting domain logic, and easier onboarding and ownership.
Creating My First Open Source Vue 3 Library
Vue.js London 2023
27 min
Creating My First Open Source Vue 3 Library
Let's talk about Vue 3 and creating your first open source library. We'll discuss design choices, a personal example of creating a Vue 3 open source library, community and open source, lessons learned, and key takeaways for creating an open source project. We'll also cover building a Vue 3 library, the Authenticator project and its requirements, code sharing and best practices, using Xstate for state management, Vue 3 best practices, testing strategies, open sourcing and community feedback, documentation driven development, challenges and improvements, and the roadmap for the future.
Auth0 and Vue: A Match Made in Heaven for Secure App Development
Vue.js London 2023
9 min
Auth0 and Vue: A Match Made in Heaven for Secure App Development
Hello Vue.js live. My name is Tyler Clark and today I'm giving a talk titled, Vue.js – Building secure applications. I'll be discussing the biggest app threats today, including brute force attacks, credential stuffing, and phishing. I'll also present solutions like WebAuthn for passwordless authentication using biometrics. As you can see here, use the credentials.create function to get a challenge from a server request. Then, pass the necessary information about the user and the acceptable public key types to the server. WebAuthn eliminates password-based flows, creating a secure private and public key pair.
Ref() vs. Reactive(): What to Choose Using Vue 3 Composition API?
Vue.js London 2023
22 min
Ref() vs. Reactive(): What to Choose Using Vue 3 Composition API?
This talk compares Rev and Reactive in Vue 3, exploring reactivity and their limitations. It discusses the use of watchers, identity issues, and migration strategies. The talk also highlights the benefits of using the Ref function for better reactivity and the recommended pattern of grouping Refs. Opinions from the Vue community are shared, with a majority preferring Ref over Reactive.
Prefetch Strategies to Boost the Performance of Your Vue.JS App
Vue.js London 2023
21 min
Prefetch Strategies to Boost the Performance of Your Vue.JS App
Welcome to my Vue.js talk on prefetching strategies and boosting app performance. A crucial part of web performance is optimizing for the network. Caching and resource hints, such as DNS prefetch, preconnect, preload, and module preload, can improve website performance. Prefetching non-critical sources and using different strategies can enhance user experience. Libraries like unhead and get.js offer customization and predictive prefetching based on Google Analytics data.
Migrating a 1000 Class Components App to Vue 3
Vue.js London 2023
28 min
Migrating a 1000 Class Components App to Vue 3
The Talk discusses the migration of a large frontend view application from Vue 2 to Vue 3. The strategy involves converting components to the Composition API, switching from Vuex to Pinea, and overcoming challenges with Vite configuration. The migration process includes selecting components based on the product roadmap, improving type safety, and reducing boilerplate. The results of the migration include improved type checking, faster tests, and a safer codebase.
Patterns for Large Scale Vue.js Applications
Vue.js London 2023
24 min
Patterns for Large Scale Vue.js Applications
In this Talk, Daniel Kelly discusses patterns for large-scale Vue.js app development, emphasizing the importance of following standards and using officially recommended tooling. He highlights the Vue.js style guide as a valuable resource for styling standards and suggests using TypeScript and Nuxt 3 to enhance development capabilities. He also mentions the benefits of having a naming convention for routes and the concept of wrapping third-party dependencies for flexibility. Additionally, he mentions the app-icon component for a generic icon solution and the advantages of interacting with backends via an SDK.
Let’s Make Our Single Page Application Accessible
Vue.js London 2023
25 min
Let’s Make Our Single Page Application Accessible
Today's Talk focused on making single-page applications more accessible. It highlighted the importance of web accessibility for all users, including those with disabilities and different circumstances. The Talk discussed common accessibility issues in single-page applications, such as dynamic content loading and page refreshing, and provided solutions to address them. It also demonstrated the implementation of LiveRegion and user answer composable in Vue.js to improve accessibility. Additionally, the Talk emphasized the need to enhance routing, navigation, and component selection for better accessibility. Lastly, it mentioned the use of the View App Setting plugin to check for accessibility issues in development.
Building the Vue 3 VDOM on Stage
Vue.js London 2023
31 min
Building the Vue 3 VDOM on Stage
Today we will build a virtual DOM, which is a programming interface for HTML and XML documents. The virtual DOM decouples rendering logic from the actual DOM, making it easier to manipulate and inspect. We will create our own virtual DOM by implementing functions to create, mount, unmount, and patch virtual nodes. We will also explore event handling, rendering lists of objects, and unmounting nodes. The virtual DOM in Vue 3 has a flatter hierarchy and may be replaced by direct DOM manipulation for better performance.
Alive and Kicking - A Vue Into Rock & Roll
Vue.js London 2023
27 min
Alive and Kicking - A Vue Into Rock & Roll
The Talk introduces FutS guitar karaoke, a virtual experience in the browser using Vue, Nuxt, Supa Bass, Pignan, Cloudinary, and WebMedia. The virtual experience visualizes audio and allows users to vote and share their votes on Twitter. The browser interacts with the amplifier to change sounds on the guitar, and the browser updates in real-time with vote data. The guitar signal resembles the playing song, and users can choose between Chuck Berry's 'Johnny B. Goode' and AC-DC for the song performance.
Building Backwards Compatible Vue Libraries
Vue.js London 2023
31 min
Building Backwards Compatible Vue Libraries
This Talk discusses the challenges of upgrading to Vue 3 and maintaining Vue 2 and Vue 3 branches in a component library. It explores strategies for shipping libraries and using monorepos, as well as developing backwards compatible code. The speaker emphasizes the importance of testing and deploying components, and highlights the challenges of supporting multiple Vue versions. The Talk concludes with a demonstration of juggling and a discussion on the end-of-life status of Vue 3.
Building for the Edge - Crafting a Next-Gen Framework
Vue.js London 2023
32 min
Building for the Edge - Crafting a Next-Gen Framework
NUXT is a framework for building web apps that has undergone significant changes with the introduction of Nitro, a new server. The Talk covers topics such as building a framework with Nitro, rendering a view app, configuring Nitro and Vite, and integrating Nuxt with an existing Vue 2 project. The collaboration between Nuxt and Chrome has resulted in performance improvements, and the future of Nuxt and Nitro looks promising with new ideas and extensions being developed.
Component Design Patterns
Vue.js London 2023
18 min
Component Design Patterns
The Talk covers clean components and when to create new components, as well as patterns for writing cleaner components and the benefits of VIP patterns. Refactoring and separating code into separate components can make it shorter and easier to read, reducing complexity. The importance of not repeating oneself and the benefits of using smaller components for performance and developer experience are discussed. Composables can help extract logic in large and complex components, and patterns can be incorporated into component libraries and design systems.
Let SEO be with You in Your Nuxt App
Vue.js London Live 2021
27 min
Let SEO be with You in Your Nuxt App
This Talk provides an introduction to SEO and its importance, covering on-page and off-page SEO. It explains how to optimize a website for search engines by creating a sitemap, using meta tags, and implementing structured data. The Talk also discusses the benefits of using RSS feeds for automated newsletters and social media posts. Additionally, it emphasizes the importance of continuous optimization for SEO, including adding useful content, organizing headings, optimizing UX, and staying updated with Core Web Vitals.
Code at the Speed of Design in Chakra UI Vue
Vue.js London Live 2021
23 min
Code at the Speed of Design in Chakra UI Vue
Jonathan Bakebwa introduces Chakra UI View, a component library focused on accessibility, with features like extending themes and defining custom variants. The upcoming versions of Chakra UI V1 will introduce a zero-runtime build and a theming API with component overrides, custom variants, and custom sizes. The Talk demonstrates how to implement a button design using Chakra UI, customize button styles, create custom button sizes, and use icons from external libraries. Chakra UI allows for quick implementation of UI designs and is recommended for developers looking to enhance their designs.
Vuetify 3: Titan
Vue.js London Live 2021
20 min
Vuetify 3: Titan
Top ContentHi, I'm John Leader, the creator of Viewtify. Viewtify 3 is the upcoming version with new design concepts, improved usability, and compatibility with modern browsers. The framework has added new features like a validation system, style diversity, semantic customization options, and a density concept. Enhanced customization options, improved performance, and advanced browser support with CSS variables are also highlights of Viewtify 3.
How Vite Changes the Game for Vue and Web Developers
Vue.js London Live 2021
22 min
How Vite Changes the Game for Vue and Web Developers
Vue School offers free training material, workshops, and consulting services. Vite is a game-changer for Vue and web development, significantly improving the development experience. It leverages the browser's native ES modules feature and uses ESBuild. Vite's dev server is much faster than other bundlers. Vite provides a blazing fast development environment for various frameworks and supports server-side rendering and static site generation. Vite is ready for production and likely to be used by Vue CLI in the future.
Migrating to Vue 3
Vue.js London Live 2021
5 min
Migrating to Vue 3
This talk focuses on the migration process of upgrading Vue CLI-generated apps to Vue 3. It provides step-by-step instructions on removing Vue 2, fixing errors and warnings, and uninstalling the migration build. The talk also mentions a Vue 2 to Vue 3 cheat sheet available for a comprehensive guide. Additionally, the talk introduces a special view three migration build for running existing apps in view two mode, providing warnings and a safe environment for code updates.
Progressive Form Validation in Vue.js
Vue.js London Live 2021
9 min
Progressive Form Validation in Vue.js
vValidate is a popular Vue.js form validation library that solves major pain points in form building. It offers a progressive API and follows a composition first design approach. vValidate allows you to validate inputs by declaring rules on each field and supports Laravel's validation rules, JavaScript functions, and third-party libraries. It also supports validation schemas for the entire form. The diff tools plugin in vValidate provides an inspector for form validity, current values, and errors.
Understand the hard parts of Nuxt
Vue.js London Live 2021
9 min
Understand the hard parts of Nuxt
This lightning talk covers common Vue issues such as mutating Vuex Store state outside of mutation handlers and incorrect cloning of arrays and objects. Troubleshooting tips include checking code locally, fixing issues with undefined window or navigator, and checking for backend issues and proper data in the network tab. Additional tips include using the network tab and console log to spot bugs, checking state in real-time with Vue dev tools, and reaching out for support on Discord, GitHub, or Stack Overflow.
Options API vs Composition API: Choosing the Right Approach for Your Team
Vue.js London Live 2021
23 min
Options API vs Composition API: Choosing the Right Approach for Your Team
Top ContentToday's Talk discusses the Options API and Composition API in Vue 3, highlighting the differences and considerations when choosing an approach. The Composition API offers more flexibility and integrates well with TypeScript, but may require more familiarity with JavaScript. Combining both APIs allows for structure and flexibility, with the ability to progressively enhance code. Team preferences and the level of TypeScript usage should be considered when choosing the right approach for a project.
CI/CD Success for Vue Developers
Vue.js London Live 2021
23 min
CI/CD Success for Vue Developers
Today's Talk discusses CI and CD success with Vue.js, emphasizing the importance of automation in software delivery. The speaker shares tips applicable to all CI-CD systems and programming languages, explaining the concept of continuous integration (CI) and its role in automatically building and testing changes. Attention to speed, recovery time, and organizational considerations are crucial for CI-CD success. Techniques such as caching and job splitting can improve speed, while automation and security scanning help maintain a secure environment. Ultimately, CI-CD is a team responsibility that enables frequent releases and adaptability to change.
Taking Vue.js to the Backend
Vue.js London Live 2021
23 min
Taking Vue.js to the Backend
This talk explores using Vue.js in the backend, specifically focusing on Vue 3 Reactivity. It discusses how Vue 3 Reactivity leverages ES6 proxies to update changes and intercept hooks. The talk also covers implementing Vue.js backend with live demos, showcasing the modification of proxies and the use of reactive functions. It demonstrates the creation of a reactive array and the implementation of join, leave, and message functionalities. The talk concludes by mentioning the possibility of using computed properties and inviting further questions.
New Ways to Vue
Vue.js London Live 2021
16 min
New Ways to Vue
The Talk discussed new ways of using Vue, including the introduction of the composition API and the script setup syntax. The Vite tooling was highlighted for its performance improvements and developer experience enhancements. Components auto-importing through Vite plugin components was introduced as a way to improve code splitting and eliminate manual registration. The use of Vite plugins, Unplugin, and Vue 2 support were also discussed. The Talk mentioned that Nuxt 3 will include many of these features.
Animation and Vue.js
Vue.js London Live 2021
32 min
Animation and Vue.js
Today's Talk covers animation in Vue JS apps, including CSS animations, JavaScript animations using the GSAP library, and handling multiple elements with transition groups. The Talk also discusses different kinds of movements, state transitions, and animating numbers and SVGs. Overall, it provides a comprehensive overview of animation techniques and tools for enhancing Vue JS apps.
Vue Form Validations with Vest
Vue.js London Live 2021
21 min
Vue Form Validations with Vest
VEST is a form validation framework inspired by unit testing libraries. It provides a structured approach to form validation, making maintenance and reuse easier. VEST supports multiple validations per field, warning validations, interdependent field validation, async validations, and memoization. It is lightweight and can be integrated with various frameworks and libraries. The speaker is open to collaboration and contributions for adding a reactive interface using VUE's reactivity model.
Structuring A Massive Vuex Store
Vue.js London Live 2021
21 min
Structuring A Massive Vuex Store
The Talk discusses the process of structuring a massive UX store using modules in Vue.js. It covers topics such as namespaces, triggering mutations, and improving store usage with map mutations. The importance of refactoring the folder structure and using separate files for actions, getters, and mutations is highlighted. The Talk concludes by mentioning the possibility of adding additional layers for splitting mutations and providing contact information for further inquiries.
Vuex? No, it’s X(state)Vue for UI
Vue.js London Live 2021
33 min
Vuex? No, it’s X(state)Vue for UI
This Talk introduces state management in Vue, focusing on the Xstate library for managing state machines in UI components. The bottom-up approach in component development can lead to complexity and challenges over time. Xstate is a JavaScript and TypeScript library designed specifically for managing state machines and state charts for UI components. The Talk provides examples of creating a toggle component using Xstate and emphasizes the advantages of using Xstate, such as code reuse, precise testing, and easy maintenance. The speaker encourages developers to plan ahead and consider state, component, and feature design to write better code.
Identify Issues and Prevent Slowdowns in your Vue.JS Apps
Vue.js London Live 2021
8 min
Identify Issues and Prevent Slowdowns in your Vue.JS Apps
Hi, I'm Simon, a solutions engineer at Sentry. We focus on code observability, supporting all major languages and frameworks. With the Sentry SDK, you can monitor errors and performance. Get started with an easy installation process. Sentry provides detailed error information, including the stack trace and contextual information. It also supports source control management systems and integrates with issue tracking tools. The distributed trace feature allows you to see relationships between errors on the front end and back end. We can optimize queries to improve user experience and reduce user misery.
How Developers Can Use Automated App Security Testing To Protect Vue Apps
Vue.js London Live 2021
7 min
How Developers Can Use Automated App Security Testing To Protect Vue Apps
Today, I'm going to tell you how developers can use automated application security testing to protect their Vue apps. I'll explain what it means to shift left, show an example of a cross-site scripting vulnerability, and provide the tools you need to find these vulnerabilities before production. Let's jump into an example of our Vue app with cross-site scripting. We have FontTalk, a message board where users can discuss fonts and style their posts. Bob logs in and sees a conversation about fonts. Unaware of cross-site scripting, his account is compromised. The malicious image tag sends his confidential information to the attacker. To prevent this, we need to make changes in the code.
A New Kind of Abstraction
Vue.js London Live 2021
8 min
A New Kind of Abstraction
Abstractions simplify working with low-level concepts like APIs or languages, allowing developers to build on top of them and add helper functions. However, there are tradeoffs, such as increased code size. Abstractions operate on a spectrum, with different runtimes like Node, Dino, and the browser at opposite ends. Code that runs in Dino can likely run in the browser, and code that runs in Node can also run in the browser.
Fast & Furious - Going headless with Nuxt.js!
Vue.js London Live 2021
32 min
Fast & Furious - Going headless with Nuxt.js!
This talk introduces using Next.js with a headless CMS called Storyblock. It covers setting up Storyblock with Next.js, understanding components and index pages, rendering components and requesting data, enhancing preview with the visual editor, creating article components and schemas, reusing components, and exploring the Storyblock and Next.js connection.
How to Measure Performance Effectively?
Vue.js London Live 2021
28 min
How to Measure Performance Effectively?
This Talk discusses the evolution of performance measurement tooling and the importance of performance in web development. It introduces Google Lighthouse as a tool that provides detailed information on webpage performance. The Talk emphasizes the significance of Core Web Vitals, including Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift. It suggests hosting the Lighthouse environment locally and using Lighthouse CI for continuous performance measurement. The Talk also highlights the impact of Core Web Vitals on SEO and the importance of prioritizing field data over lab data.
Vue Storefront + Vendure = Fullstack Open Source Ecommerce
Vue.js London Live 2021
19 min
Vue Storefront + Vendure = Fullstack Open Source Ecommerce
This Talk discusses the full stack open-source e-commerce using ViewStorefront and Venge. ViewStorefront is a lightning-fast frontend platform for headless commerce, while Venge is a framework for the back-end. Both tools are highly customizable and built using modern frameworks. Creating an online store with Venge is quick and easy. Overall, this Talk presents a dream stack for open-source e-commerce and encourages contributions to the projects.
Composition API: a Quick overVue
JSNation Live 2020
28 min
Composition API: a Quick overVue
The Talk introduces the composition API in Vue 3 as a better option for composing reusable features compared to mixins and scope slots. It explains how to abstract search functionality using the composition API and demonstrates the creation of searchQuery and searchResultsQuery objects. The Talk also covers running breed search in the mounted hook, sorting results using computed properties, and the benefits of the composition API in terms of code organization and reusability. It concludes by mentioning the upcoming release of Vue 3 and the advantages of the composition API.