April 25 - 26, 2024
Vue.js Live Conference
Online
Vue.js Live 2024

Code / Create / Communicate

Following the expansion of the Vue ecosystem, Vue.js Live Conference has grown from a local Meetup to an international conf. The event will welcome more 5k Vue folks remotely from anywhere in the world. Every participant around the world can access online workshops, fun & networking with stellar Vue people.

FocusReactiveHygraph
21 min
More Secure Vue & Nuxt Apps - By Default
As developers we usually have to develop fast and because of that some Software Quality aspects such as Performance, Accessibility or Security can suffer. Configuring web applications to be protected against common threats and hackers is difficult. And that is why, you can use Nuxt Security -> a module for Nuxt that will help you build more secure applications without additional configuration needed! In this talk, I will guide you through the concepts of Security in modern web applications and OWASP to help you build more secure Vue & Nuxt applications!
21 min
No More Mocking! Write Better Tests For Your Nuxt Application With Contract Tests
Let's explore how to create more resilient software systems employing API-first techniques. By utilizing the contract testing tool Specmatic and the Playwright test runner, we can develop tests that ensure our Nuxt applications work perfectly and communicate correctly with Microservices they rely on to get data.

We will take a closer look at how to write OpenAPI specifications that aid us in documenting our APIs and enable us to ensure they work correctly. Furthermore, we can use those specifications to automatically spin up a stub server, which we can use to test our application in a controlled environment with Playwright.

The techniques I'll show you will help you write tests that enable you to rapidly iterate without fearing regressions.

Learning Outcomes:

1. You know about the basic principles of Contract Testing and how it also helps drive our E2E tests.
2. You know to opt for Contract Testing when working with Microservices and BFFs, database seeding when using Nuxt with a database, and mocking when dealing with SPAs.
3. You know the steps to create your first OpenAPI specification and integrate Specmatic with Playwright or Cypress, and you are keen to apply this technique to your projects.
7 min
Build Your Own Component Library, With `Shadcn-vue`
In case you are unaware, shadcn (creator of `ui.shadcn`) created a new way for devs to build component libraries. Instead of a usual component library, where you are limited to the component styling, props, or events designed by the author, you now have the capability to modify the components to suit your needs.Quote from the shadcn himself, "It's a collection of re-usable components that you can copy and paste into your apps."
In this talk, I will be showcasing the power of this approach, walking through how to customize it, and why it has gained such a popularity in the recent months.
8 min
Learning To Learn : How To Web Dev The Right Way With Vue If You Are A Beginner
It is not common that people trying to break in to web dev literally learn to start from HTML/CSS or "create xyz" workflows where 25 files pop up all of a sudden after you run one command and there's no way to comprehend what just happened. Learning should be crafted and tuned to one's way of learning else we are all just dogs pretending to be sheep in a horse stable(literally not absurd at all). We will explore how I went from oh marquee is cool(it still is,believe me) to being a person that could build web apps with people having web dev experience equal to my age. I'll share my learnings, findings, lessons, how to and especially what to learn and most importantly where do I start (the most common beginner question) and why mentorship is important.We'll talk about (in no specific order)- How and why(like really why) to start learning;- Choosing the right speed and mentor;- Choosing the right framework(welp, this is gonna turn heads) and why this matters and why it should be Vue;- Struggles and lessons learned(Rome, built, one day sorts...);- What you should know before you really decide now based on above experiences about getting into this wibbly wobbly web stuff.
26 min
We May Not Need Component Testing
Testings are mandatory and unit tests are the foundation for building a good testing system for our project. But for front end projects which involve components, how many unit tests are considered efficient and not overkill? Should we use additional libraries like Testing Library or Vue Test Utils with Vitest to test a component, when we can perform the same with just Playwright? Whether a component test using an E2E framework like Playwright is really a kill for? Let's find out in my talk.
23 min
Who Are Vue? Authn In Vue, The Important Parts
In the ever-evolving landscape of modern single-page applications, VueJS stands out but also presents us with challenges. Among them, authentication is crucial: ensuring the user's identity and securing their journey within your application. Fear not; we're here to guide you through these exciting frontiers. In my session, I'll unravel the secrets of authentication in VueJS applications, making it a delightful learning journey for everyone while keeping the focus on the most critical parts. I'll provide an overview of an authentication flow, break down each step, and demystify the role of JWT tokens in the process. 
Whether you're a seasoned VueJS developer or just getting started, you're welcome. A dash of prior experience with user authentication certainly doesn't hurt, but it's optional. 
Target audience: Web Developers of all levels who want to learn about security topics and best practices.
Key learnings:- Giving a small introduction to the most essential terms and concepts of Authentication;- VueJS is used as an example, but the concepts will be agnostic.
24 min
PrimeVue | The Next-Gen UI Component Library
PrimeVue is a popular UI Component library for Vue 3 featuring over 80 components,  unstyled mode with Tailwind CSS presets, pass-through properties, design-agnostic theming, icons, blocks, and templates.PrimeVue is one of the most popular UI libraries in the Vue ecosystem. The talk begins with an overview of the feature set and dives into the detail for each of the content points below; - Overview- Best Practices of UI Component Development- Component Suite- Pass Through API- Design Agnostic Theming- Unstyled Mode- Tailwind CSS Presets- Icons/Blocks/Templates- Figma to Theme Generation- Roadmap