Nuxt 4 - An overview! Alexander Lichter 2025-07-25 | Nuxt 4 is out! Another major release after Nuxt 3 was released 2 years and 8 months ago. Let's have a look at all the features and changes---Links and Resources📺 TWO Major Nuxt Versions youtube.com/watch?v=TAoTh4DqH6A📺 New Directory Structure youtube.com/watch?v=KnCNOp5Pbfs📺 Shared Folder youtube.com/watch?v=_m5ct5e8nVo🔗 Announcement post nuxt.com/blog/v4---Chaptermarks00:00 Intro and Prelude01:10 New features of Nuxt 402:16 The new CLI04:19 New Directory Structure07:17 Better tsconfig08:40 Further changes09:00 Upgrading from Nuxt 2 😅09:43 Upgrading from Nuxt 310:17 Taking a look at breaking changes15:53 Nuxt 5?16:16 More upcoming features17:46 Wrapping up---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
Why deduping NPM packages is NECESSARY Alexander Lichter 2025-09-26 | Package deduplication is an important step. Why? Let's check in the video, based on the Nuxt upgrade command.---Links and Resources* Nuxt CLI github.com/nuxt/cli/blob/f4749f8daed010153d1a709ac1343d21d5731d22/packages/nuxi/src/commands/upgrade.ts#L186* nypm github.com/unjs/nypm/blob/main/src/api.ts* No bun Dedupe github.com/oven-sh/bun/issues/8594---Chaptermarks---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
The BEST way to PROTECT yourself against Supply Chain Attacks Alexander Lichter 2025-09-19 | We've seen a huge wave of supply chain attacks in the JS ecosystem (again). This is a real threat to all apps being developed in the JavaScript ecosystem, given that high-download dependencies or tools like Nx are targeted.This video shows what happened (a high-level overview) and most importantly what YOU CAN DO to protect you and your project against it.---Links and Resources* In the Past: CVEs on Vite youtube.com/watch?v=ctsfEc9UYU8* Nx got compromised https://www.aikido.dev/blog/popular-nx-packages-compromised-on-npm* Nx postmortem https://nx.dev/blog/s1ngularity-postmortem* S1ngularity attacked again https://www.aikido.dev/blog/s1ngularity-nx-attackers-strike-again* Tinycolor supply chain attack https://socket.dev/blog/tinycolor-supply-chain-attack-affects-40-packages* Trusted publishing is enabled https://github.blog/changelog/2025-07-31-npm-trusted-publishing-with-oidc-is-generally-available/* Npm docs on trusted publishing docs.npmjs.com/trusted-publishers* Npm top packages with provenance status github.com/sxzz/npm-top-provenance#untrusted-showing-first-100-of-8784* Kevin's post on high-download packages without trusted publishing https://bsky.app/profile/sxzz.dev/post/3lydmji6nr22k* e18e issue to promote trusted publishing github.com/e18e/ecosystem-issues/issues/201* Wes' comment on 2FA https://bsky.app/profile/notwes.bsky.social/post/3lwgx6llchc2o* Daniel Roe's GitHub Action github.com/danielroe/provenance-action* Old Nuxt opencollective script github.com/nuxt-contrib/opencollective* PNPM never built dependencies setting pnpm.io/settings#neverbuiltdependencies* PNPM 10.16 release blog pnpm.io/blog/releases/10.16---Chaptermarks00:00 Intro & Overview00:59 What has happened - a top-level recap03:44 What maintainers and package authors can do06:10 Do we need 2FA for publishing packages?07:21 How you can protect yourself against these attacks---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
Prerendered Nuxt sites with LESS JAVASCRIPT? Alexander Lichter 2025-09-12 | When you pre-render your Nuxt application (aka. using SSG), some parts of your data fetching logic might not be needed. Good that we can remove them with a module, and soon with a settings as part of the Nuxt core!---Links and Resources* github.com/danielroe/nuxt-rebundle* github.com/nuxt/nuxt/pull/33131---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
Nuxt has BETTER CHUNKING now! Alexander Lichter 2025-09-05 | In the latest Nuxt release, the chunking was improved a lot, leading to stable hashes and less changing files per build. Figure out what happened and what the problem was!---Links and Resources* PR---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
FASTER Nuxt Production builds with 3 lines of changes Alexander Lichter 2025-08-29 | Everybody wants faster builds - and you can have them by switching the underlying Vite version to Rolldown-Vite! Never heard of it? Then time to watch the video.---Links and Resources* Rolldown https://rolldown.rs/* Rolldown-Vite migration guide https://vite.dev/rolldown* Rolldown-Vite Perf Wins github.com/vitejs/rolldown-vite-perf-wins* CodSpeed benchmark codspeed.io/nuxt/nuxt/branches/feat%2Ftest-rolldown-vite* Nuxt.com CI before github.com/nuxt/nuxt.com/actions/runs/16427059534/job/46419889875#step:7:224* Nuxt.com CI after github.com/nuxt/nuxt.com/actions/runs/16950013832/job/48040398572#step:7:240* PR against actual rolldown-vite (test) github.com/nuxt/nuxt/pull/31880* Nitro 2 won't have Rolldown support but Nitro 3 will github.com/nitrojs/nitro/issues/2233* Rolldown-Vite Improvement commit github.com/nuxt/nuxt/commit/1111111f1ef0403d122da6a0c4ea35ef574e9b19---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
ONE CAVEAT less for Lazy Hydration Alexander Lichter 2025-08-22 | Lazy hydration in Nuxt is great for performance during the first request - but it could only be used by relying on auto imports. As the community is torn on whether they are a curse or a blessing, there is a different way now!---Links and Resources* Lazy Hydration in Nuxt youtube.com/watch?v=hibbpTe661U* Auto Imports in Nuxt youtube.com/watch?v=FT2LQJ2NvVI* Server components vs. Lazy Hydration youtube.com/watch?v=Jijoc0RH_tA* Implementation PR github.com/nuxt/nuxt/pull/31192---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
Using a `src` folder in Nuxt 4 Alexander Lichter 2025-08-15 | Setting up a folder that contains all code and no config, often referred to as `src` folder was pretty simple in Nuxt 3. With Nuxt 4, things changed. This video explains how you can still configure it and which shortcomings exist---Links and Resources* Nuxt 4 Overview video youtube.com/watch?v=rCT54d8sMWk* Nuxt 4 Layers youtube.com/watch?v=fr5yo3aVkfA* src folder issue github.com/nuxt/nuxt/issues/32965 ---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
You should use useFetch with a custom $fetch instance Alexander Lichter 2025-08-08 | useAsyncData + $fetch is a common combo, especially when you have a custom instance. But... often you can use useFetch for it 👀---Links and Resources* Repository Pattern Video youtube.com/watch?v=jXH8Tr-exhI---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
There is a BUILT-IN check for a new version of your Nuxt app?! Alexander Lichter 2025-08-01 | After deploying your app, you often want to notify users that there is a new version available. Doing that in Nuxt is actually easier than you'd expect! Let's take a look at how that works, how it is related to the app manifest and eventually implementing it!---Links and Resources* Documentation for the experimental option nuxt.com/docs/4.x/api/nuxt-config#checkoutdatedbuildinterval* Nuxt implementation to check github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/plugins/check-outdated-build.client.ts* Inline Composables Video youtube.com/watch?v=iKaDFAxzJyw---Chaptermarks---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
Vue 3.6 ALPHA is out! All you need to know 👀 Alexander Lichter 2025-07-18 | Vue 3.6 Alpha DROPPED! We take a look what is in it!Thanks to Hennge for sponsoring this video!👉 Join Hennge as Junior Vue Dev https://lichter.link/hennge-junior *👉 Coding Challenge (Front End) with code FE-GIP-ALEXLICHTER challenge.hennge.com/?entry-code=FE-GIP-ALEXLICHTER *---Links and Resources🔗 Release notes github.com/vuejs/core/releases/tag/v3.6.0-alpha.1🔗 Alien Signals github.com/stackblitz/alien-signals🔗 Reactivity Benchmark github.com/transitive-bullshit/js-reactivity-benchmark🔗 JS Framework Benchmark krausest.github.io/js-framework-benchmark/2025/table_chrome_138.0.7204.50.html🔗Johnson's Vapor Update pbs.twimg.com/media/GowmkHAbUAAVrYG?format=jpg&name=large---Chaptermarks---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
How we released Nuxt 4 (featuring @danielroe) #webdevelopment #nuxtjs #nuxt #vuejs #vue Alexander Lichter 2025-07-16 | Some behind-the-scenes footage of how we released Nuxt 👀
Vercel BUYING NuxtLabs - What it means for you! Alexander Lichter 2025-07-13 | This week's acquisition of NuxtLabs was a suprise for most of us - but what does it mean for Nuxt as a framework, for the community and for YOU?!Disclaimer: This video shares my own opinion and not the official stance of VoidZero nor the Nuxt core team as a whole.---Links and Resources🔗 NuxtLabs announcement 🎙 Full @DejaVueFm episode with Daniel and Sébastien youtube.com/watch?v=xHbjFW9EJ-8🔗 Nuxt Governance document github.com/nuxt/governance🔗 Nitro Governance document github.com/nitrojs/governance/blob/main/README.md🔗 Daniel's Reddit AMA reddit.com/r/vuejs/comments/1lvdkwr/i_lead_the_nuxt_core_team_ama---Chaptermarks00:00 Intro00:21 What happened?01:17 Am I part of Vercel now?01:29 Did I know about the acquisition?01:57 NuxtLabs IS NOT Nuxt02:45 What does it mean for NuxtLabs?03:20 What will happen with the products of NuxtLabs?05:06 What does it mean for Nuxt as a framework?10:08 Consequences for Nitro and UnJS11:26 What changes for Vue?12:09 What is in for Vercel?13:35 Who are the "winners" of this acquisition?14:10 And who are the "losers"?15:16 Addressing Worries16:42 Wrapping Up---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
More Features of Vues VS Code Extension Alexander Lichter 2025-07-02 | Curious for more features of the Vue (official) VS Code Extension? Then this video will show you a lot of them. In ~8 minutes you learn about inlay hints, drag & drop, reactivity visualization and more!---Links and Resources* Download the Vue (official) Extension now marketplace.visualstudio.com/items?itemName=Vue.volar* Sponsor Johnson for his amazing work github.com/sponsors/johnsoncodehk---Chaptermarks00:00 Intro00:08 Drag & Drop Components00:55 No more jumping to the component TS Declarations01:19 Missing Props hint02:05 All is Configurable02:30 Indicate Destructured Props03:50 Automatically inserting ".value"04:50 Sponsoring the project05:50 Reactivity Visualization06:31 Focus Mode07:00 Template Interpolation highlighting07:24 Wrapping up---
THIS 4 year old Vue feature helps with nested components Alexander Lichter 2025-06-27 | Structuring components, especially with naming, is not always easy. But the feature shown in this video - namespaced components - will help with this! Learn more now! 👀---Links and Resources* Reka Ui Namespaced reka-ui.com/docs/guides/namespaced-components#namespaced-components* Reka UI Normal reka-ui.com/docs/components/dialog* Motion Vue https://motion.dev/docs/vue-motion-component* The @DejaVueFm episode with Matt, creator of Motion.dev youtube.com/watch?v=d8VfOmgh9IM---Chaptermarks00:00 Intro & Problem00:58 Demo App01:42 Multi-word components02:21 Implicit coupling through names is not enough04:15 Namespaced Components05:23 Example in the wild07:26 When should you use them?08:21 What do YOU think?---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
Better SPA accessibility in Nuxt with a single built-in component! Alexander Lichter 2025-06-20 | Accessibility, aka. a11y, is important for every project out there. Thanks to Nuxt, you can already make your projects a tad more accessible without doing anything. That doesn't relieve you from providing alt tags or making sure links and buttons have titles or labels, but will still help you "do less". More in the video!---Links and Resources🔗 WebAIM Million Report webaim.org/projects/million🔗 Nuxt Route Announcer Docs nuxt.com/docs/api/components/nuxt-route-announcer🔗 Component Source Code github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-route-announcer.ts🔗 vue-announcer github.com/vue-a11y/vue-announcer---Chaptermarkslater ;)---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
TWO Major Nuxt versions coming? All you need to know about Nuxt 4 and Nuxt 5 Alexander Lichter 2025-06-13 | ---Links and Resources🔗 Nuxt Blog post nuxt.com/blog/roadmap-v4🔗 Nuxt Migration Guide nuxt.com/docs/getting-started/upgrade#testing-nuxt-4🔗 Nuxt Alpha 2 github.com/nuxt/nuxt/releases/tag/v4.0.0-alpha.2🔗 Daniel's PR to migrate elk github.com/elk-zone/elk/pull/3298🔗 h3 beta github.com/h3js/h3/releases/tag/v2.0.0-beta.0📺 Nuxt 4 folder structure youtube.com/watch?v=KnCNOp5Pbfs📺 Nuxt 4 Shared Folder youtube.com/watch?v=_m5ct5e8nVo---Chaptermarkslater ;)---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
TYPESAFE and fs-based Routing in plain Vue.js?! Alexander Lichter 2025-06-06 | We all want better typesafety. And often also routing based on the file system. While some of you might think that this is only possible in Nuxt, this Video will show you how it works in plain Vue!Thanks to Hennge for sponsoring this video!👉 Join Hennge https://lichter.link/hennge-intern👉 Coding Challenge (Front End) with code FE-GIP-ALEXLICHTER challenge.hennge.com/?entry-code=FE-GIP-ALEXLICHTER---Links and Resources🔗 github.com/posva/unplugin-vue-router---Chaptermarkslater ;)---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
OVERUSING Reactivity in Vue? Alexander Lichter 2025-05-30 | Reactivity in Vue is pretty powerful, but often *overused*. A classic case of - if I am a hammer, everything looks like a nail. Let's go through 4 common scenarios and fix them, ensuring reactivity is only used where necessary. ---Links and Resources🔗 Timeout Example play.vuejs.org/#eNp9kstuwjAQRX/F8qYgUR4qKxRQW8SilfpQYelNGiaJwbEjPwISyr93HCc0C8Qq9tyb8bljX+hLWY4rB3RBI5NoXlpiwLpyxSQvSqUtuRANKalJqlVBHtD6wGSipEFjrk4fYEycAVl61yCNhYFhp1tegHK21aZYZzJ1MrFcSaLkWvDkOBiSC5Ok32tcxcL5jlbjh3i17XRVEHEXSgNssFyFHre7NExerkdkPp16jNqTRJOQF5PixkJRitgC7giJfp21yPiceMQloy0so6stnhBNgh68+YxUjzxFV+90dLaraJLP0BhNeifQEbUGZ5TybHwwSuLwmwCMJqoouQD9VfohGUYXXTRGYyHU6b2p+cmMunqSQ3K8UT+Ys68x+q3BgK4Q6qrZWGdgg7zZfsIZ11exUHsn0H1H/AGjhPOMwfbq5B6xe76G9q15QlxmO7M5W5CmC+VBw52E3Pis1nei/+M+jefNf3iJtP4DlL3rfQ==🔗 Static Data Example play.vuejs.org/#eNp9Uk1v2zAM/SuELk6GwF6xnQI3WNYGWLa2KWZjh1U9uA790cqSIclpCsP/vZTcpDkUhQGD4nsk36PUs2XbhrsO2ZzFJtd1a8Gg7doFl3XTKm2hB40FDFBo1UBA1IBLLnMljYXLZbqEc7gLks31KphBkKTLdH3hIgcF9+/UvMpkidmDQCqgjhNHuPt6P+Wy6GRuayXBVF1RCJxMoecSYCyU+PwvE50r8yUOAYgiuL36D5ebmyClP6xTuFr/WUH6a52MjOvMVmEhlNITH+pMblVDvb+Anx0KlKWtpiQAgITSvKPEcPc28TCcy4HLOBo3RLuhg8WmFZlFOgHE1dmi709NDkMcUdKDD521ZO9HLur86ZyzN5+cLZIxiqORQvQ4Omn88Rcb+yIcXNlGjKsqamFRz6GWO9R2ckamRsGeyWbMGtpmUZfho1GSLttXcZarpq0F6k3rLsBwNh/7OSwTQj3/9jmrO5wd8nmF+dMH+UezdznObjUa1Dvyd8Rspku0I7xKbnBP8RFs1LZz2/gE/ItGic5pHGk/O7kl2Sc8r3btn2wty9Ss9halOZhyQh1z8HzO6BlffGL9Xe638Luvo32y4RVmtwzr🔗 Watcher example play.vuejs.org/#eNp9Uk1P4zAQ/SsjX1JEtxXaPVVppd0VqwWhgoCjL1E6aV0cO7LHoSjKf2eckJSPCvkSz3tv5r2JG/G7qmZ1QLEQqc+dqgg8UqhW0qiyso6gAYfFFHJbVoFwAy0UzpaQsCiRRprcGk9QKOdpnZUIy8ifJPvb/+vkbIB19hH1xj5HdJQHrd/wYdBkcgbLFTTSAGsoOHMcMqszHRDOIeFzPnbvy9K03Dmd93E4CF8Iy0pnhHwDSJXhCVD/KO0G9VKKsa8UwLQcd1Zv0DHyLyLwBs1Pq4fpX8Q3DHzS7i5WTXNM27bpnEvR7TuHp0/q6UVHeEel7tdSKE3oFqBMjY4mFxy77ZJ3TDEV5Hm9hdrO9t4a/sWdSoq4YqXR3VakeP1SLPp+Ecu0ts/XXY1cwOlQz3eYP52o7/0h1qS4c+jR1Rx2xChzW6QevnxY44G/R5DXFzSzvwHv0Vsdosee9ieYDdt+x+vcXnUPVZnto788EBo/hIpGI7Pt+FLwk/37TfSj3Z+zX52O9ynaV4gtD+U=🔗 Bloated computed example play.vuejs.org/#eNqdVlFv4zYM/iuEH85pL3Wc2w4YMidD17XYDbv1din25BfXVhLdZMmT5CxFmv8+SrJstUl7uCFAIpMfyY8UyXgfXTZNsm1JNIsyVUraaFBEtw2wgq/neaRVHi1yTutGSA17kGQ1hlLUTatJBQdYSVFDjA7inOe8FFxpaCQtCcwNdpSeeek/bcE11Q+dYtorKqpK0XJ9JSpvFce9Vm1o01C+dposVrrgVSGrGB4hJrtGEqXixWiQo2Vv29Z1IU1Ez3g0OoP5AvY5B2BEA5FSSNTHSN9JVHuvhS4YCm0eybZgLYHznr8TGDhdwSjEZJDC4+MzIEqnZy4gDOE+cFTSqisVyryR5QGYqm4lx3pbi3HPagbpuC+YffD1uRLKCXSxc78dHg7GJX75DL058kh9GuEddLznc+S5vPzreprGfQKBbV+oc0iTqY0BhCnyqr9fL3+/ub25ieHNm8HBAqZp+tUQ778a4uUy9z5LBNsSB/UIKxjWxMtD/kOX+VjPrIOk3qfwE5Z/Bs+Zn3LsO/klv1PnZGCN1/y50GZg0iT9IZAW98xIeyIXQ/Zvn3gNbBD/sdCbpC52I9dC1su5j2JnqkN3w3EK/9acOqzv4OBGxl1mfS/7U6LFDd3hdL476zBDi/vTMeZp54dPx1g7FPh1QuOoPOfRVfuAh2ziFiOuQXzQpG4YlgSfALKKbu0Bj5t3i1tZEQlLt3WyCUo6HcJA6QdGcKNiQujgYQZrSasf7XY1GESx4p6w/hHgkxRVW2r8xSUxG+QZ5bjMQD80xh9v63si8wi2FzV2N0ucADV2uaBiMoSYPI1xFPLPbg39j2h+g31bwF98b5oxfjGqJjs9xHRF7If/2wIu/f/JR6I3ogpDKsIIlnuI4nsquCQLFI2mgoMdXwPrlgLClt0xmzjMq3bdzKPZtTudsMLms6xeSDCbBB04HPGhwTzoyrBz7ZjYEcRa+T4sBRNyJomhvd/7/0oHg8MhmzSBs8WyH9oA2++YI7i/1hlcBPh+ER277yr91H24Ao9M7sxIB2izxo5AmdJS8PXi7oj7QLyDDJZDUf0pmwRjf/qDkbCuqN7omrm1t6JMEzkDyrdEavvGgyvFBDTIaIwvV/iesqLr5IsSHN/ArJW5mbqhjMhb2wzYH0jcMcujgjHx729WpmVLuiWGNhtS/n1C/kXtjCyPPmGDEbnFael1upBrgnNl1NfLP+yM9UqcgZYh+hXlZ6IEaw1HB/u55RXSDnCW7Qf77oj3eKeud5pw5ZMyRO2etfg8wrfIq1dSH+h+l3zv93N0+A86nYCC🔗 Deep Reactivity example play.vuejs.org/#eNp9kUFLxDAQhf9KyKUrLFlET+sqqOxBDyqrx1xKd7rNmiYhmdRK6X93mrJrESm5hPfeDN9LOn7vnGgi8DXfhMIrhywARncnjaqd9cg6Fqpca/u1g5L1rPS2ZhlNZDeTiP/jSVNYE5D04NjtZMPiQppBFE2uI5BVAhbVIlvlTq2EEBn50mxWIwtRzJ1NwG8NFKqw1qyThrFSaQS/Zso04HFxSev6tC8l+ZJjILJSHcQxWEOt05Tkha2d0uBfHSoil3w97hu8xP6cNPQRlie9qKD4/Ec/hnbQJH+jpuAbkPzsYe4PgKO9fX+Blu5ns7b7qCk9Y+4gWB0HxjH2EM2esCe5RPuUPkaZw0fYtggmnEoNoEOyT3nJ6bMeZ6r/4l6J6zRH78n7H6DAvwk=📺 shallowRef Guide---Chaptermarks00:00 Intro00:35 Timeouts and Intervals03:57 Static Data05:11 Watchers and Computeds09:07 Bloated Computeds12:35 Unnecessary Deep Reactivity13:29 Wrapping up---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
EXPOSE parts of your Vue component - How and Why? Alexander Lichter 2025-05-23 | Props down, events up! The pattern is well-known to all Vue developers. But there is another pattern which can be useful in exceptional situations - exposing parts of your component!---Links and Resources🔗 Playground play.vuejs.org/#eNqNU01v2zAM/SuaLnaAzMY+TpkbbCsyrDtsRdejLq5DJ2plSdCHlyDwfx8lxYlbrEPgC0U+0o+P5IF+0broPdAFrWxjuHbEgvOaiFpurhh1ltElk7zTyjhyIN7CPXRa1A7uoCUDaY3qSIYVsk8n2DdluhupvTtGi/LkCf/KmGSyUdI6wiPq6kXZPIt+tLIZk62XjeNKEgNI7VpJB9LlM3JgkqQCRV8LD0WM55gxMFmVqRvkjg93rI0vQqo176OB5vb98rY2WI9cK+Qu0apKdB7D50YMtKjGSItRQsoR9OCdQ3afG8GbJwRNaaJ4d+FJJnKkH1ZlykuUysSpKidML/0q6/YiJGxdJ5IqLRcOzALV6cG4/N0MZ5NEiVA6x7niAFq+KR6tkjj8mMZogypwAeaXDorj7BepYIjVQqg/P6LPGQ/z0d9soXn6h//R7oKP0dugiOmB0VPM1WYDqE4Ir37/hB3ap2Cn1l4g+j9BFFUJHzgm2Fcv10h7gotsb+I+crm5t6sdzsOOTQWiATlEPKO4lWEBXmv9TPdD8THmoZ6o4rO1vvSEcJWe3c35GmTdAR4DAvIsbP7L3R+XPuDSziM6wwJIh8k1tFzCaqeVhTziYhJGY6kLL0LUDyCOD0JWuMWG7JU38aeL0V+lw+3f4jhAYJMhilfh9hpCy3Fm5xMpp1UrjXk8nFNKWn4HnNWcHA5JgGF4U5X6tbugw1+cC5j0🔗 Example 1 github.com/nuxt/ui/blob/v3/src/runtime/components/Form.vue🔗 Example 2 github.com/primefaces/primevue/blob/master/apps/volt/volt/Popover.vue🔗 Example 3 github.com/dennisadriaans/vue-chrts/blob/main/packages/vue/src/elements/Table.vue🔗 Example 4 github.com/vuejs/repl/blob/main/src/output/Preview.vue---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.---Tags/Info: defineExpose, Vue, composition API
Dates and Times done RIGHT with SSR in Nuxt Alexander Lichter 2025-05-16 | Nuxt 3.17 brings a new built-in component called NuxtTime. Let's check out why it is useful and more importantly, how it is implemented under the hood.---Links and Resources🔗 3.17 Release Post nuxt.com/blog/v3-17🔗 Nuxt Time Module (now archived) github.com/danielroe/nuxt-time🔗 Source Code of NuxtTime github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-time.vue🔗 Intl API developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl---Chaptermarks00:00 Intro00:32 Dates and Time problems with SSR01:53 NuxtTime component04:54 How does NuxtTime work?13:34 Wrapping up---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
Components in a DIFFERENT FOLDER? Alexander Lichter 2025-05-09 | Component belong into the components folder, right? WRONG! You can put them somewhere else too if you want - with just a few adjustments in Nuxt.js---Links and Resources🔗 Nuxt.js Issue about component grouping github.com/nuxt/nuxt/issues/28894🔗 Josh's blog post deltener.com/blog/nuxt-enterprise-patterns-component-management---Chaptermarks00:00 Intro01:03 Our Demo App02:27 Does it work by default?04:36 Simple configuration tweaks05:57 One more problem07:12 Wrapping up---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
Fetch ONCE and share data between Nuxt and Nitro! Alexander Lichter 2025-05-02 | When building your whole application with Nuxt and using Nitro's backend capabilities (or as BFF with an external API), sometimes you want to share data between both parts - ideally without fetching them again.Impossible? Not at all! This video shows how.---Links and Resources🔗 Nitro docs https://nitro.build/---Chaptermarks00:00 Intro00:14 Sharing data can be necessary01:09 Demo App Setup01:33 Setting up what we want to share04:34 Attaching the info to the event context05:21 Augmenting the Event Context for TypeScript07:55 Sharing the data with the Nuxt part of our app13:10 Verifying it works14:00 Wrapping up---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
Vue.js Watchers have Callback Flush WHAT?! Alexander Lichter 2025-04-25 | Vue's watchers come in handy when you need side effects (otherwise, you better use computed properties!). But did you know what you can set up *when* they evaluate? It can actually be quite handy. Learn in this video how & when you want to change the flush setting---Links and Resources🔗 Docs vuejs.org/guide/essentials/watchers.html#callback-flush-timing🔗 Learn.nuxt.com code github.com/nuxt/learn.nuxt.com/blob/842b826837f7dfe150e2bb2a0b60a895668f654d/components/PanelPreview.vue#L24-L31---Chaptermarks00:00 Watchers and when to use them01:13 Building the demo application02:32 Using the Callback Flush timing03:47 pre vs. post05:59 The third one - sync07:28 Building or own syncRef composable11:19 Wrapping it up---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
You should try these VueUse composables 👀🥚 Alexander Lichter 2025-04-18 | Time to take a look at 7 (or more 👀) VueUse composables that you might've not heard about before but definitely could use in your Vue or Nuxt application.---Links and Resources🔗 vueuse.org/shared/syncRef🔗 vueuse.org/core/useRefHistory🔗 vueuse.org/shared/whenever🔗 vueuse.org/shared/until🔗 vueuse.org/core/useScrollLock🔗 vueuse.org/core/onStartTyping🔗 vueuse.org/core/onClickOutside🔗 vueuse.org/core/useNow🔗 vueuse.org/core/useTimeAgo🔗 vueuse.org/shared/useLastChanged---Chaptermarks00:00 Intro00:18 What is VueUse?01:43 syncRefs / syncRef02:46 useRefHistory06:08 whenever & until09:10 useScrollLock10:28 onStartTyping11:47 onClickOutside13:34 useNow14:01 useTimeAgo14:39 useLastChanged15:05 Wrapping up---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
About the recent Vite CVEs 👀 Alexander Lichter 2025-04-11 | Vite published a series of CVEs (security issues and their patches) recently. In this video we have a look how serious they are, what you should do (update!) and even try out one of the vulnerabilities with an older version.---Links and Resources🔗 First CVE (published January) github.com/vitejs/vite/security/advisories/GHSA-vg6x-rcgg-rjx6🔗 ?raw?? CVE github.com/vitejs/vite/security/advisories/GHSA-x574-m823-4x7w🔗 ?import query CVE github.com/vitejs/vite/security/advisories/GHSA-4r4m-qw57-chr8🔗.svg & relative paths CVE github.com/vitejs/vite/security/advisories/GHSA-xcj6-pq6g-qj4x🔗Request Target CVE github.com/vitejs/vite/security/advisories/GHSA-356w-63v5-8wf4🎬 Package Overrides youtube.com/watch?v=8CS8PKB9rAQ---Chaptermarks00:00 Intro00:43 Disclaimer & Update!01:23 Important: Dev Server Only Vulnerability02:02 First CVE - Any request to the dev server04:39 Mitigation strategies07:04 Testing out the exploit10:12 With the mitigation in place10:49 The group of four recent CVEs15:35 What do that many CVEs mean?16:44 Wrapping up---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
Nuxt Server Components vs. Lazy Hydration Alexander Lichter 2025-04-04 | We all want less JavaScript and better performance. Both, Nuxt Server Components *and* Lazy Hydration can help with that in different ways. In this video, you learn how both work and what the differences are, plus when to use either!---Links and Resources🔗 Nuxt Islands component github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-island.ts🔗 Island Architecture https://www.patterns.dev/vanilla/islands-architecture📺 Lazy Hydration in Nuxt youtube.com/watch?v=hibbpTe661U📺 Event Fetch youtube.com/watch?v=7vfwYaHtv3U---Chaptermarks00:00 Intro & Overview00:47 What is Lazy Hydration?03:24 What are Server Components?04:45 How do Server Components work under the hood08:39 Difference between the two13:55 When to use which?15:15 Wrapping up---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
Combine POWERFUL native CSS features with Tailwind CSS Alexander Lichter 2025-03-28 | Tailwind CSS is widely used, no matter if you have a love- or hate-relationship with the powerful utility-first CSS Framework. But oftentimes, you can combine it with existing parts of the spec, such as the use of CSS Variables to make things flexible but not give too much freedom, or with data attributes to make state management easier!#tailwindcss #css #webdevelopment ---Links and Resources🔗 Tweet that inspired the video https://x.com/malfaitrobin/status/1887057743279784445📺 Why your buttons are all wrong youtube.com/watch?v=BdNFBgnzbIY---Chaptermarks00:00 Intro00:49 Demo Application Setup02:20 Making the Alert component more flexible03:27 Using CSS Variables to flexibly set colors07:06 Reusing Tailwind color definitions08:56 Data Attribute states as custom variants10:46 Summary---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
Package Overrides 101: Learn how & why Alexander Lichter 2025-03-21 | We've talked about patching packages before - but overriding is sometimes necessary too, especially when the package is not a direct dependency.Learn how in this video - and get a little treat as well 👀---Links and Resources:🔗 Example issue for overriding github.com/nuxt/ui/issues/2971🔗 Rolldown + Vite 👀 github.com/vitejs/rolldown-vite🔗 https://pkg.pr.new/📺 Patching Packages youtube.com/watch?v=NgDXxci6CYU---Chaptermarks:00:00 Intro00:13 New Job who dis?00:38 Why overriding packages?02:24 How to apply overrides04:56 Vite + Rolldown 👀07:39 Does it work?08:15 TL;DR
Something changes - but a lot stays the same! #job #vue Alexander Lichter 2025-03-19 | More details @ https://bsky.app/profile/did:plc:lgmfg3uvicfeuq56ohxqvfal/post/3lkqmivxln226
Lazy Hydration is available NOW Alexander Lichter 2025-03-14 | Hydration is a delicate topic, especially hydration errors. But the performance aspect of hydration shouldn't be underestimated either. Luckily, we don't need to hydrate *everything* anymore, as Vue introduced lazy hydration. And now it is ergonomically available in Nuxt too.Learn how in this video 👀---Links and Resources:🔗 Vue Lazy Hydration blog.vuejs.org/posts/vue-3-5#lazy-hydration🔗 Nuxt 3.16 nuxt.com/blog/v3-16---Chaptermarks:
5 Vue features you might MISS OUT right now Alexander Lichter 2025-03-07 | In more than 11 years of Vue.js, a lot of features became part of the framework - and of course, nobody uses *all* of them. So why not presenting some of the lesser-known features? That's what happens in this video!---Links and Resources:🔗 Props Destructure vuejs.org/guide/components/props.html#reactive-props-destructure🔗 Prop (Same-Name) Shorthand vuejs.org/guide/essentials/template-syntax.html#same-name-shorthand🔗 v-bind in CSS vuejs.org/api/sfc-css-features.html#v-bind-in-css🔗 useTemplateRef vuejs.org/guide/essentials/template-refs.html#accessing-the-refs🔗 v-memo vuejs.org/api/built-in-directives.html#v-memo📺 Reactivity Transform youtube.com/watch?v=7aLwI0F5xEo📺 Inline Composables youtube.com/watch?v=iKaDFAxzJyw📺 @DejaVueFm #E050 - DevRel and IDEs (with Jan-Niklas Wortmann) https://share.transistor.fm/s/b5d8358f---Chaptermarks:00:00 Intro00:59 Props Destructuring06:12 Prop Shorthand07:35 v-bind and CSS09:58 useTemplateRef12:56 v-memo18:44 Wrapping up
3 (and a half) Pinia problems you should AVOID Alexander Lichter 2025-02-28 | Pinia is integral for a lot of applications. But make sure that you don't make the mistakes shown in the video, or if you do, how to fix them.---Links and Resources🔗 Pinia Docs pinia.vuejs.org 📺 You are using useFetch wrong youtube.com/watch?v=njsGVmcWviY📺 Composition API code organization youtube.com/watch?v=iKaDFAxzJyw📺 @DejaVueFm #E049 - The Fusion of Laravel and Vue (with Aaron Francis) https://share.transistor.fm/s/721e8887---Chaptermarks00:00 Intro00:45 Demo Application00:58 Write Setup Stores01:30 Migrating from Options to Setup Store04:52 Why migrating?05:07 Using composables in Pinia Stores07:15 Organizing your code properly08:24 Integration with Nuxt13:05 Wrapping up---Music Credits"Local Forecast - Elevator"Kevin MacLeod (incompetech.com)Licensed under Creative Commons: By Attribution 3.0http://creativecommons.org/licenses/by/3.0---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keep the channel running. I only include affiliate links for services or products mentioned that we use ourselves or have good experience with.
Are we implementing Buttons WRONG?! Alexander Lichter 2025-02-21 | Recently I was complaining about a certain Nuxt UI implementation when it comes to buttons and luckily realized (thanks to the stream chat) - I was wrong! But with such a common practice I wondered... are we all failing at complying with the spec for buttons? The answer is YES! Learn how in video.Fun fact: The WIP v4 w3.org/TR/css-ui-4/#valdef-cursor-pointer suggests that pointer *may* be used for interactive elements.#tailwindcss #webdevelopment #accessibility ---Links and Resources🔗 Check out Nuxt UI - Get 20% off the pro version with code LICHTER https://www.lichter.link/nuxt-ui *🔗 Building LiveVue Playlist (members-only) youtube.com/playlist?list=PL06MUQt-_wls2o1FhvUIknQWQb_uaQhtL🔗 Nuxt UI Issue (leading to the Tailwind Issue) github.com/nuxt/ui/issues/2332🔗 Tailwind Issue github.com/tailwindlabs/tailwindcss/issues/8961🔗 Buttons should NOT have a cursor medium.com/simple-human/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b🔗 Gov UK Design System Button Component design-system.service.gov.uk/components/button📺 @DejaVueFm #E048 - AI and Vue.js (with Daniel Kelly and Patrick van Everdingen) https://share.transistor.fm/s/67728315---Chaptermarks00:00 Intro00:35 Building LiveVue.dev01:00 No Cursor?!01:48 That should be good for a11y?02:16 Browser defaults03:09 The CSS Spec03:42 Another hand full of reasons05:00 A Royal Example06:33 Tailwind changed to NO by default07:06 What is your opinion?---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
Avoid a common Vue PERFORMANCE KILLER Alexander Lichter 2025-02-14 | Registering components globally is a common patter but also often a performance killer. Learn in this video what a *better* way of adding third party components is and how to spot such chances in existing projects already.PS: You also learn reading a tree chart and analyzing your bundle!#vuejs3 #vue #typescript---Links and Resources🔗 Join me at Vue.js Amsterdam 205 - 10% OFF with Code LICHTER https://lichter.link/vue-ams-25 *🔗 Meetup BEFORE Vue.js Amsterdam meetup.com/funda-meetup/events/305514997🔗Vite Bundle Visualizer github.com/KusStar/vite-bundle-visualizer📺 @DejaVueFm #E047 - A Vue at Alexander Lichter youtube.com/watch?v=kiKHq9oWbnc---Chaptermarks00:00 Intro00:19 Don't be lazy!01:12 Our simple demo app06:23 Registering our test component globally08:04 Comparing charts before and after09:30 How to resolve the performance faux pas11:13 Comparing all three charts12:05 Auto imports vs global registration13:08 Wrapping up---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
My FAVORITE UI Library for Vue.js Alexander Lichter 2025-02-07 | Wondering what my favorite UI library in the Vue and Nuxt ecosystem is? I'll show you which and why I personally enjoy using that specific library - and why you could do too!#vuejs3 #vue #typescript---Links and Resources🔗 Join me at Vue.js Amsterdam 205 - 10% OFF wih Code LICHTER https://lichter.link/vue-ams-25 *🔗 Meetup BEFORE Vue.js Amsterdam meetup.com/funda-meetup/events/305514997🔗 Check out Nuxt UI - Get 20% off the pro version with code LICHTER https://www.lichter.link/nuxt-ui *🔗 TresJS tresjs.org🔗 Inspira UI inspira-ui.com🔗 Unovue github.com/unovue📺 @DejaVueFm #E046 - A Vue at Michael Thiessen youtube.com/watch?v=dgYukajbHmI---Chaptermarks00:00 Intro00:18 Is there a "BEST" component library?01:07 Which one is it?03:14 The landing page and first components05:10 How to set up the library?06:27 Component Overview08:07 Why is this UI library so special?10:33 How often is the library updated?11:27 What is your favorite component?11:40 Highlighting the organization13:02 Shoutout to the contributors13:58 The Latest DejaVue Episode14:20 Wrapping up---Links marked with * are affiliate links. I get a small commission when you register for the service or buy the product through my link. This helps me keeping the channel running. I only include affiliate links for services or product mentioned that we use ourselves or have good experience with.
Conditional Properties in Vue.js Alexander Lichter 2025-01-31 | Passing either prop A or prop B but not both is a common use case - but not that easy to achieve in Vue! In this video, you learn how 🙌#vuejs3 #vue #typescript---Links and Resources🔗 Conditional Properties Issue github.com/vuejs/core/issues/8952github.com/vuejs/core/issues/8952🔗 Vue Playground play.vuejs.org/#eNqVVctu2kAU/ZVbL0oS8VDarhxClAeqWlUQJaBWqrtw7As4jGes8ZiAUr6ii276df2S3hk/sMGBdAGauc9z7mP8bF1GUXuRoGVb3diTQaQgRpVEwFw+PXcsFTtWz+FBGAmpYICxQv9acD9QgeAug4kUITTanR2NDto4KzxHIvqCC2R1vjW63LvbSUERBLooDCPmKqQbQNcPFuZAxzetFvz98ws+Doc30Grl4l24nmBCEi0uZOgyxwI3itCVLvdQk8WlIlnnsP/TLFC47S4SxQKuxTpCCdqQsxVk2pILPM2QpyEhiOlGMV+F/v+yD0SWw6QrpX+Q6M73JqwkMObV8HVdtQXX1qeOVdSxzkyoGWouipKmppVe/oary9e1srYYhztp5/7vtn3LPA/kjmQQunJ1MML+Om3VInPrdtIB73ZKY0/XWK2YPs5UyOBZW04CplDaEPAFSnV0euzwtVkdY2k1aYk9wSfBtP0YC06bbrwcyxNhFDCUw0hDokW303ha5zImnj4bmZIJNnO5N0NvXiN/jJda5li3EmOUC+pIoVOunCIR0+r+/cC0plCGwk8YWe9R3mEsWKIxpmZXCfcJdsnOoP1kXpqAT0dxf6mQxzkpDVRbro29Y9Hbcr2H+gbu+/YH40f1pCrWPnH73k2YIkcZeHQdD8b3/RvzlDpcrSKEUpxbKaIYznWqnzkMM2E2NNKHqkGKRjZs5hwjddTXt9R8M35Vn+xRMGe9E8ac+NRkMnvUyEpaiZcHecH3wgZOwy3rXM0m5I4O93FCgQzf7nYBekc0twfee7MapYWgrrzw8djpy24vqp84SRnpZ3qTNQSegXaU2CXhA9FL1zRnC2tdBm1Q8E8NbIiVpCkkxhSvzLigmeXqnMBoph9+wRuK/uW8QPA1UDMqe3fUhHHPIPl+S/sN/aXHEh+7c1yJCZA2PYx7Pza4zipcvg3viigjgjwGGgPkfgzi4RE9pQ0BLuComvItjI/JupCOmzDS0pFBD2Cnwaq5DEHtQUkpnU6dlTAvSVOXLK1SWlVY90yMnTplYbJynXTyRJsJyQWbKTHI8jkxthWdtf4H6SUFbw==📺 5 Missing Vue.js Features youtube.com/watch?v=P3dxu0wNLDw📺 @DejaVueFm #E045 - Formkit and Hot Takes (with Justin Schroeder) youtube.com/watch?v=vtv6J3KZXaA---Chaptermarks00:00 Intro00:20 What are Conditional Props?00:41 The existing GitHub issue01:30 What do we try to achieve?02:35 Why do we need that?03:36 Building our conditional props06:33 The magic trick07:58 Finishing our example08:19 Not done yet! - Forcing non-existance10:15 Building the 2nd component with our knowledge11:13 More TS magic? Sadly not13:35 TL;DR
Building an Association Manager with Nuxt.js Part 004 (Stream VOD) Alexander Lichter 2025-01-26 | And we continue building an association manager live on Twitch @ twitch.tv/TheAlexLichter/. The VOD shows how Nuxt, NuxtHub, Drizzle, Zod and Nuxt UI are used to build a real-life and open-source software project.GET NUXT UI PRO at https://lichter.link/nuxt-ui/ *Links:🎬 Playlist of the whole video series youtube.com/playlist?list=PL06MUQt-_wluDj9G9cr3y_V9WgY2TNZNN🔗 Repo: github.com/manniL/association-manager🔗 Nuxt UI: https://lichter.link/nuxt-ui *🔗 Nuxt Hub (sign up for beta, free tier) hub.nuxt.comDon't forget to hit that Subscribe button, ring the notification bell, and give a thumbs up if you find this video helpful. Thanks for tuning in and happy hacking! 🌟Recorded on: 9th of July 2024#vuejs #nuxtjs #nuxt #vue ---Chaptermarks:00:00:00 Intro and Setup00:01:17 What we did so far / recap00:02:29 Fixing date tests that we commented out last time00:09:40 Dealing with Payments00:35:07 Q: Missing advanced content in the ecosystem?00:38:30 Q: Extending the Nuxt devtools?00:41:20 Q: Building a "Layers config"00:44:05 Back to the Payments00:46:15 Q: How do you like Drizzle?00:54:35 Side Project with Nuxt UI00:56:15 Persisting Payments and PayeesDon't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up!🌐 Connect further:Website: lichter.ioTwitter/X: twitter.com/TheAlexLichterTwitch: twitch.tv/TheAlexLichter---Links marked with * are affiliate links. We get a small commission when you register for the service through our link. This helps us to keep the podcast running. We only include affiliate links for services mentioned in the episode or that we use ourselves.
Youll keep writing .value FOREVER Alexander Lichter 2025-01-24 | A lot of Vue developers are bothered by the ".value". But did you know there were efforts to make .value fully obsolete - and they FAILED?! Learn in this video why 👀#vue #nuxt #webdevelopment ---Links and Resources📺 @DejaVueFm #E044 - Our Predictions for Vue and Nuxt in 2025 (with Daniel Roe) youtube.com/watch?v=qQrwWnw5so4---Chaptermarks
How did Vue do in 2024? Alexander Lichter 2025-01-17 | We have a look if 2024 was a good year for Vue and Nuxt as a whole 👀#vue #nuxt---Links and Resources🔗 State of JavaScript 2024 2024.stateofjs.com/en-US🔗 Gartner Hype Cycle en.wikipedia.org/wiki/Gartner_hype_cycle🔗 Weekly Vue Newsletter https://weekly-vue.news/📺 @DejaVueFm #E043 - The Year in ReVue (with Daniel Roe) youtube.com/watch?v=mmzbqy_qu8U---Chaptermarks00:00 Welcome to 202501:04 Thanks to all survey participants01:48 Did JavaScript got worse?!06:17 How did Vue do in the Survey09:42 Why is Vue has better Retention and Positivity?17:31 And what about Nuxt? 22:38 What is used at work?23:44 Resources & People28:45 What is your opinion?
The CORRECT Tag Order in your Vue SFCs Alexander Lichter 2025-01-10 | One thing that makes Vue special are it's SFCs - Single File Components. But which is the best order of the three tags - script, template and styles - inside the components?#vue #nuxt #sfc---Links and Resources🔗 Evan's Tweet https://x.com/youyuxi/status/1427982990957846529🔗 CAPI OAPI Comparison github.com/vuejs/docs/blob/main/src/guide/extras/images/composition-api-after.png🔗 FileExplorer in CAPI gist.github.com/yyx990803/8854f8f6a97631576c14b63c8acd8f2e🔗 Elk https://elk.zone/🔗 Elk Component github.com/elk-zone/elk/blob/main/components/command/CommandPanel.vue📺 Multiple Components with Vue Vine youtube.com/watch?v=YHdDraNNGCk📺 @DejaVueFm #E042 - Creating Technical Content (with Adam Jahr) youtube.com/watch?v=C30HwOSH-CU---Chaptermarks00:00 Intro00:45 The Benefits of SFCs01:06 Strong order preferences01:16 The Traditional / OG order02:26 The Modern order02:24 When and why did it happen?03:30 Benefits in bigger components (Personal Opinion)04:35 Example based on the CAPI OAPI Comparison05:35 Another example - An Elk component06:35 What is the BEST order?07:36 Split up the tags via your IDE08:34 Wrapping up - What do you think?
defineXYZ in Vue - What are Compiler Macros?! Alexander Lichter 2025-01-03 | 💚 Join Vue.js Amsterdam 2025, 10% off the 3 Day ticket with LICHTER https://lichter.link/vue-ams-25 *Even when not using auto imports, there are some function calls in your Vue SFCs that you don't "need" to import. Why is that? And what makes them special? Find out in this video!#vue #nuxt #pinia---Links and Resources🔗 Vue Macros https://vue-macros.dev/📺 Auto Imports in Vue and Nuxt youtube.com/watch?v=YHdDraNNGCk📺 DejaVue #E015 - Ten Years of Vue.js (with Evan You) youtu.be/OG8dvyKLjIM?t=2915📺 @DejaVueFm #E041 - The Quadruple Migration (with Rijk van Zanten) youtube.com/watch?v=PGHRy3aNhks---Chaptermarks00:00 Intro00:40 Don't miss Vue.js Amsterdam01:24 Simple Demo Playground02:53 Composition API without script setup04:53 The magic of script setup05:50 How do we access props and emits?07:48 The latest compiler macro - defineModel10:05 More macros?!12:40 Wrapping up
No `composables` folder in Nitro - but WHY? Alexander Lichter 2024-12-27 | Let's discuss why there is no composables folder in Nitro. And how functions like "useStorage" are different from Vue and Nuxt composables.#nitro #h3 #unjs ---ChaptermarksToo lazy, sorry! Holidays 🙈
Composing Event Handlers in Nitro Alexander Lichter 2024-12-20 | All of you Nitro fans already used `defineEventHandler` before - I'm more than sure! But did you ever think of a function *returning* an event handler - which would help you encapsulating logic and creates a pattern to compose these handlers!No? Well, let's check it out!#nitro #h3 #unjs ---Links and Resources:📺 Auto Imports in Vue/Nuxt/Nitro youtube.com/watch?v=YHdDraNNGCk---Chaptermarks00:00 Intro01:01 Setting up our demo03:58 The Problem and a temporary solution06:25 We need another Abstraction!07:13 The Wrapped Event Handler Pattern14:23 Composing these Handlers15:19 What do you think?15:34 Wrapping up
Auto Imports in Vue and Nuxt - The Good and the Bad Alexander Lichter 2024-12-13 | 💚 Join Vue.js Amsterdam 2025, 10% off the 3 day ticket with LICHTER https://lichter.link/vue-ams-25 *Yes, we talk about one of the most polarizing topics in the Vue and Nuxt community - auto imports!#vue #nuxt #pinia---Links and Resources🔗 Unimport github.com/unjs/unimport🔗 Unplugin github.com/unjs/unplugin🔗 Unplugin Vue Components github.com/unplugin/unplugin-vue-components🔗 Unplugin Auto Import github.com/unplugin/unplugin-auto-import🔗 Evan's CAPI refactoring gist.github.com/yyx990803/8854f8f6a97631576c14b63c8acd8f2e🔗 Anthony Fu's ESLint Plugin for explicit imports github.com/antfu/nuxt-eslint-auto-explicit-import🔗 Anthony's ESLint Plugin in Use github.com/antfu/eslint-flat-config-viewer/commit/0f8000851b4ac0d7f3ea5e49963c6d7248303b7b#diff-55b232a4ba83cc96f45d504975cdc0abd24dba063546b940949cca629823c30bR2🔗 Nitro 3 Discussion - Depending Less on Auto Imports github.com/nitrojs/nitro/issues/2232📺 Customize auto imports in Nuxt youtube.com/watch?v=FT2LQJ2NvVI📺 Shared folder youtube.com/watch?v=_m5ct5e8nVo&lc=UgxM2h9Ps3B2j1HEb2Z4AaABAg📺 @DejaVueFm #E038 - Self-founding and growing a Nuxt-based SaaS (with Sumit Kumar) youtube.com/watch?v=Bo9bhUaqbbA---Chaptermarks00:00 Intro01:31 Types of Auto Imports02:41 Showcasing Auto Imports of Components04:52 Too many manual imports?05:55 Auto importing composables08:10 Downsides of auto imports09:15 Refactoring with auto imports10:45 Unimport12:25 Showcasing the unplugin system14:20 Disabling Auto Imports in Nuxt17:25 Anthony's ESLint module helping with migrating18:15 Nuxt and Nitro relying less on Auto Imports?19:20 My own opinion20:33 What is your take?
MAJOR versions for Pinia and VueUse 👀 Alexander Lichter 2024-12-06 | 💚 Join Vue.js Amsterdam 2025, 10% off the 3 Day ticket with LICHTER https://lichter.link/vue-ams-25 *VueUse and Pinia will get new major versions next year - and they are all about reducing support for older Vue versions. #vue #nuxt #pinia---Links and Resources🔗 Pinia NPM issue github.com/vuejs/pinia/issues/853🔗 Eduardo deciding Vue 3 only Pinia https://bsky.app/profile/esm.dev/post/3laelubejhx2f🔗 Reddit post reddit.com/r/vuejs/comments/1h6vvgx/bye_pinia_vue_2_users🔗 VueUse account posting about Vue 3 only https://bsky.app/profile/vueuse.org/post/3lbfdavfy2s2p📺 @DejaVueFm #E037 - VueConf Toronto Panel (with Evan You, Daniel Roe, Sigrid Huemer and John Leider) youtube.com/watch?v=rPn_orw1LPc---Chaptermarks00:00 Intro00:24 Vue.js Amsterdam01:27 Pinia supported Vue 2 for a while01:47 Eduardo considering dropping Vue 2 support02:27 Why consider dropping Vue 2 support?02:55 No Vue 2.7 support at the moment03:37 Pinia Vue 3 support only is set!04:08 Time to upgrade?04:41 Why VueUse is also considering Vue 3 only?06:08 The end of vue-demi?08:37 Own Opinion09:06 Time to migrate to Vue 3?09:37 What do you think about the changes?10:15 Wrapping up
Make your Vue & Nuxt apps MORE SECURE! Alexander Lichter 2024-11-29 | Security is critical - but often not thought through by developers when it comes to adding features. Luckily, Vue has a lot of safeguards in place - but there are situations where these won't help either.Which ones you wonder? Check out the video!#vue #nuxt #security #webdev---Links and Resources:🔗 State of JS survey.devographics.com/en-US/survey/state-of-js/2024?source=alexander_lichter_video_vue_security🔗 DOMPurify github.com/cure53/DOMPurify🔗 css-tricks.com/css-keylogger🔗 OWASP Top Ten owasp.org/www-project-top-ten🔗 Vue Security Best Practices vuejs.org/guide/best-practices/security.html🔗 Nuxt Security Module github.com/Baroshem/nuxt-security📺 Info around runtimeConfig youtube.com/watch?v=2tKOZc3Z1dk📺 The most common runtimeConfig mistake youtube.com/watch?v=_FYV5WfiWvs📺 Nuxt Plugin Object Syntax youtube.com/watch?v=2aXZyXB1QGQ📺 Nuxt Context Loss with Async Code youtube.com/watch?v=ofuKRZLtOdY📺 @DejaVueFm #E036 - Secure your Vue and Nuxt Applications (with Jakub Andrzejewski) youtube.com/watch?v=NsWZaPQWdQA---Chaptermarks:00:00 Intro00:18 Fill out the State of JavaScript 202401:02 General Suggestions for Web App Security01:42 What is Cross Site Scripting and how to avoid it05:29 Avoid using v-html where possible06:11 Sanitize v-html content if you can't avoid it07:18 Limit URLs for e.g. redirects08:10 Restrict the styles users can provide09:31 Do not misconfigure your runtimeConfig12:10 Cross Request State Pollution when using SSR14:29 Avoid context loss with Pinia in Nuxt16:42 The Nuxt Security Module17:35 Check your own code18:29 More Security? Check out the latest DejaVue Episode18:42 Wrapping up
Multiple Vue Components in one File? Vue Vine makes it possible Alexander Lichter 2024-11-22 | Once again, I'm not kidding 👀---Links and Resources:🔗 Fixed issue with Nuxt github.com/vue-vine/vue-vine/issues/163🔗 Vue Vine Docs https://vue-vine.dev/🔗 Vue Vine Repo github.com/vue-vine/vue-vine📺 @DejaVueFm #E035 - Error Handling in Vue ---Chaptermarks:00:00 Intro00:16 What's the problem?02:04 The solution?02:40 Demo App04:30 Vue Vine VS Code Extension05:26 How it works under the hood?06:27 Building a simple component07:17 How to handle Props, Events and Slots09:40 Multiple components in one file10:53 Why not JSX?11:45 Another way to write components?13:00 My opinion13:27 Wrapping up - what do you think?
Vues Reactivity System got FASTER AGAIN!? Alexander Lichter 2024-11-15 | I'm not kidding! It'll happen again, and hopefully other framework reactivity systems will apply similar perf improvements.---Links and Resources:🔗 How it started https://x.com/johnsoncodehk/status/1840558232093483192🔗 Johnson improving the reactivity system before github.com/vuejs/core/pull/5912🔗 alien-signals repo github.com/stackblitz/alien-signals🔗 Porting findings to Vue.js github.com/vuejs/core/pull/12349🔗 Statistics from Johnson https://x.com/johnsoncodehk/status/1840563583043973408🔗 Another benchmark PR github.com/transitive-bullshit/js-reactivity-benchmark/pull/4📺 @DejaVueFm #E034 - Data Fetching in Vue and Nuxt ---Chaptermarks:00:00 Intro00:18 Faster - again?!00:40 Improving Vue Language Tools01:10 How can one randomly write a Signal library?02:08 From Push to Pull to Push-Pull Reactivity02:50 The native-signal / alien-signal release03:36 Why is it a separate package?04:04 Gimme some stats05:00 When will it come to Vue?05:36 Vue 3.5 with and without improvements07:22 What does it mean for you?08:14 Do you want a deep dive?08:30 Wrapping up
Headings and Typography in Vue.js (in any framework actually...) Alexander Lichter 2024-11-08 | How dare you coupling style and semantics---Links and Resources:🔗 Vue Playground play.vuejs.org/#eNqFVN9v0zAQ/ldOeckmtQ0w2ENIi8o0iSE0pnUaDwQhL7km2Rzbsp2tZfR/5+ykTTuqTn1ofPd9d9/9sJ+DqVKjxwaDOEhMpitlwaBt1CQVVa2ktnCzVLLQTJVLmGtZQziKepOjhh9TkYokaulEpIPFWnFmkU4ASY+ffEHOJfyQmufJVhzCJdEWaf8vMXbJnbu0NYdnFzuTXOoYnsrKIukAuGPZQ6FlI/Jh57vjZCLfqpPZxQgGgTWZFPOqGN0bKagDPmIaZLJWFUf9XdlKCpMGcZvL+RjJf/rqbVY3OFjbsxKzhz32e7NwtjS40mhQP2IabHyW6QJt6z6fXeKCvjfOWuYNJ/QB5zUayRunsYV9pqJJ9hbOq73wc6xEcWPOFxaFWRflhDrkyuPTgGZ5dqD0Xu7J6L3nUU+pi7vb8HKRgDNRjIlNwfqleqbB1aqxmMOqW6vNJtmlQrhlumLCwhhC7vKG8BdCU1NB/stSP0IHpgEaF86ywmFVOIDHnuphlGEMOc4rgVdaKpP4iojwKYawfOvjle/8nwohisBKKE8dpotEuE4OFTw5Ou7z3k6vL6aXN7/Pvk1ns/NZDNeYSZ0nHXwAxmpq/IQE+KS+FJcVWU72YVvawCWdS2GHd5Ln4EQPPyy4I/iKtwhtB/y8HIw81AW/2K2gTvEZZ8agobTrNh8dHcN40qrQNBctXor/2XF/UUBf4qEb7cJKgdTluDJuuqxIA4gzl5eOuzL84N0OJYZLC1EbItrE+P/ytxcd6HoqzD18tNOy9VL6ppnqD/X09I2y/gHYvAkac2+g9mzxfQf38E96vh9A7ibJ3C2Ige4Vak77sxXPgdZhXiesn51g9Q+hHNk3📺 @DejaVueFm #E033 - Vue or React (with CJ from Syntax) youtube.com/watch?v=viXIin24C8Y---Chaptermarks:00:00 Intro00:42 What's the problem?01:52 Examples in Production04:21 An exception05:20 Building our own Typography component13:13 Wrapping up
