#vue

Learn how to build a Vue application deployed to the edge to bring a blazing fast experience to your end users.

Meet TresJS ▲ ■ ●, a declarative way of bringing the magic of ThreeJS using everyday Vue Components and composables. Think of it as React-three-fiber or Lunchbox but without the need of a custom renderer. It just works.
Are you ready to add a new dimension to your Vue Apps?

The creator of Vue js gives an update on the new features of the technology.

How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.
For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.

Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.

Explain about NuxtJS codebase refactor and challenges facing to implement Vue 3, Vite and other packages.

Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!

Introduction to Domain Driven Design
- What is DDD?
- Key principles of DDD
- Benefits of using DDD in web application development
Domain Modeling in Vue 3 Applications
- How to design and implement domain models in Vue 3
- Strategies for integrating domain logic with Vue's reactive data model and component-based architecture
Best Practices for Implementing DDD in Vue 3
- Strategies for organizing code in a way that follows DDD principles
- Techniques for reducing coupling between domain and application logic
- Tips for testing and debugging domain logic in Vue 3 applications

Learn about how to create a Vue.js library, and what best practices you should follow. We'll also learn about open source, and how maintainers work. We'll touch on xState, the composition API and testing strategies including Cypess and Vue test utils!

There are two approaches to add a reactive state to Vue components using the Composition API. As a result, you must choose whether to utilize reactive(), ref(), or both. I'll guide you in making the best decision.

This talk will cover the benefits of using prefetching to improve the performance of Vue.js applications. Attendees will learn about different prefetching strategies and best practices for optimising prefetching for different network conditions.

Vue 3 is amazing, but a lot of us are still stuck on a Vue 2 monolith. Some of us are stuck even more due to technology choices made before Vue 3 was even on the roadmap. Let's outline the process of migrating a large project to Vue 3 and Vite. Techniques we can employ to get some benefits sooner, process we can apply to get things done more quickly. Things we can do to get it done eventually.

What is the best way to structure a Vue.js application so that it can scale to meet all your users' needs? There are multiple patterns established by the Vue community and the programming community at large that can be adopted in order to make your codebases more predictable, maintainable, and extendable.

This talk is going to provide recommendations to make a single page application accessible. The talk is not going to cover the basic of accessibility, like adding ALT text or using correct HTML elements, but it is going to cover major shortfalls existing in our SPA.
In no particular order, this talk is going to cover the following topics:
- Provide a list of resources (blog, book and people to follow)
- Introduce the issue with SPA with a live example
- Describe and solve issues with Routing issue in SPA
- Describe and solve issues with dynamic changes in a Vue app
- A quick intro to correct HTML element (and how to leverage Vue for this)
- Describe and fix Browser history

This talk is designed to show people what a virtual DOM is, and what it is used for. We'll see a bit the theory of it, then build a simplified version of the Vue 3 VDOM on stage from scratch - step by step! After the talk, people will have more familiarity with the black box that sometimes is "VDOM".

Rock
&
roll is alive and kicking and in this talk I will showcase that Vue is so versatile it can be used to do audio visualisations while rock guitar soars through the browser. The audience will have access to a vue application which allows them to vote for a song to be played live on stage. The screen shows all the votes and I play them as they come up. While playing music meta data is shown and an audio visualisation plays while I’m rocking on stage. The more votes a song gets, the higher it shows on the list and the more chance I’ll play it. The whole experience is created using Vue and Uniform. Next to waking the audience up with some spicy rock
&
roll, I will explain how the software was build and why Vue is such an important technology for composable architectures with multiple channels. Vue is also used to control the guitar sound, right from the browser.

Many organizations with component libraries are working on upgrades for their Vue 2 apps so that they can support Vue 3. Sometimes it's not easy! Ideally, you could write your code once and cross-compile it for different Vue runtimes. In this talk, we'll do exactly that. At the end, you'll have a recipe for shipping libraries that support both Vue 2 and Vue 3.

Creating a new Vue-based meta-framework from scratch with live coding.

How do you write a good component? In this talk we’ll explore several different patterns for writing better components. We’ll look at techniques for simplifying our components, making them easier to understand, and getting more out of the components we’ve already got.

With Chakra UI, we are able to override component styles to express custom design systems with accessible Vue components. This talk explores the new theme API in v1 and how you can use it to quickly build custom UIs for your application.

Learn about the newest features coming to the next version of the framework. See how the core team approached porting Vuetify from Vue 2 to the Vue 3 composition api. Preview updates to core features such as the new layout system, improved testing methodologies, expanded customization options, updates to css utility classes, and much much more.

In this talk you will learn what Vite is, why it is so great, and why you want to use it ASAP. You will also learn how to use Vite with Vue.js or React, and what Vitepress is and how to use it.
Alex Kyriakidis, founder of Vue School, will also answer the most frequently asked questions around Vite, including production use, Vite and test runners, what it means for Nuxt, and many more.

Migrating your Vue 2 app over to Vue 3 doesn't have to be painful. This talk walks you through the process.

Forms can be hard in frontend. Whether your forms are simple or complex, they share common pain points like value tracking, user interactions, validation, and submission. We will look at how vee-validate helps you address those issues, and how to apply progressive enhancements to your forms and input components.

On Stackoverflow, people usually do have the exact same struggles daily. Let me quickly review most of them and give you some solutions on how to solve them. On top of giving you tips on how to solve your bugs faster!

With the introduction of Composition API into the Vue ecosystem, many are curious as to what they should pick. Options API? Composition API? Which is best? What are the tradeoffs? In this talk, we'll examine the two approaches so that you can make the right decision for your app.

This talk will cover best practices for performance, stability, security, and maintainability of CI/CD pipelines, each supported with practical examples and counterexamples and tailored towards Vue.js developers.

Vue.js is a frontend framework. But the different modules, such as the reactivity engine can be imported on its own. Let's have some fun and explore possible use cases for Vue reactivity in the backend.

Brief intro to the new features of Vue 3 and Vite, then focus on how those features / mindset affect the way we think of tooling and DX. Which leads to my Vitesse project and several unplugins that enhance the Vue developer experience even further (will do some short demos in between). Finally, introduce the ways to use those new features in the existing Vue 2 apps today and make the migrations easier.

There's a lot to gain from adding animations to your site or app. Beyond their visual appeal, you can guide the user's attention, cover up slow to load components and elements, and reveal sections of a page without the user wondering where it came from. This talk will cover the built-in ways Vue.js helps you animate your site, and how for more complicated animations you can hook into third party libraries. It'll also cover the basics of animation itself – what to animate, what not to animate – and how you can use animations to enhance your website without harming the experience of people with disabilities.

Dive deeply into the architecture of our massive Vuex store. This solution will always be easy to scale, read, and maintain no matter how huge your app is.

Forms on the web have always been with us, yet it still feels like you always have to fight them to make validation work as you planned - and even with the significant improvements modern day libraries and frameworks give us, maintenance is mostly a hassle.
Vest is a new breed of form validations framework. It draws its syntax and style from Unit Testing frameworks like mocha or Jest (hence the name), which brings the elegance and declarative nature of these frameworks to the world of form validation, greatly reducing the overhead it takes to write, maintain and reuse validations in your JS apps.

UI components are built on user flows or state graphs. To manage these states, we usually resolved to boolean variables system like isLoading. But this proves to be buggy and hard to maintain as the codebase grows. There is a better solution. In my talk, we will explore how we can fully control our app's states and develop a more adaptive UI system to users' behavior while keeping the codebase scalable with state machines, in real time.

In this lightning talk, you will see: 
1. The lack of visibility on Vue.js applications. 
2. How to install the Sentry Vue.js SDK. 
3. How you can use Sentry to identify errors and slowdowns within your Vue.js App.

Frontend frameworks like Vue are vulnerable to unsanitized inputs to execute malicious code. The patterns that allow for this are generally understood, but there are still some cases when your apps might still be at risk. Learn how you can implement automated application security to keep your apps safe.

Developers often look at abstractions as being ""the closer to the metal, the better,"" meaning that as abstractions become further removed from the lowest possible level, the more you give up in terms of performance and features. But abstractions work as a spectrum also. We'll look at how we can adjust our view of abstractions and what kind of examples we can use to better understand that abstractions have less to do with programming and more to do with where we deploy.

This will be fast
&
furious! I will show you the fastest possible way to connect your Nuxt.js (Vue.js) project to the headless CMS and deploy it in seconds. You should know a thing or two about Nuxt.js, headless CMS in general or JAMstack as there will be no time to describe the concepts in detail. In the end, you will be furious how insanely good the JAMstack is!

Most of the people in our industry know what Lighthouse or Page Speed Insights are and use them regularly. Unfortunately, most of them have no idea how they work which leads to terrible misconceptions and misunderstandings, especially for non-tech business owners. In this talk, I want to help everyone make better use of these tools explaining how they work, what's their goal, and how to interpret the data to come to the right conclusions.

Building an online store these days is not an easy task. With so many competitors Time to Market is the key to success. That's why we decided to build an integration between Vue Storefront- Lightning-Fast Frontend Platform for Headless Commerce, and Vendure - modern, headless GraphQL-based e-commerce framework. Both tools are built using modern JavaScript stack (Nuxt.js and Nest.js) and have several out of the box integrations like search engines, CMS's, payments, and so on. Also, both projects have a huge community of Open Source contributors who support the development process. In this presentation, I will show you how fast you can create your store with VSF and Vendure.

Composition API is one of the biggest new features in Vue 3. In this talk, I will explain what is it and how to use Composition API for code abstraction and reuse.