![Alexander Lichter](/img/default-banner.jpg)
- Видео 56
- Просмотров 337 335
Alexander Lichter
Нидерланды
Добавлен 26 ноя 2013
Web Engineering Consultant, Managing Director and Nuxt.js team member
Is Vue the fastest when it comes to SSR?
The "SSR showdown" benchmark was heavily discussed in the last ten days. In this video, we have a look at the first and the final iteration of the benchmark, issues, results and most importantly - what the results mean for YOU as a developer.
Tune in!
---
Links and Resources:
🔗 The updated benchmark post blog.platformatic.dev/ssr-performance-showdown
🔗 The first iteration web.archive.org/web/20240827212521/blog.platformatic.dev/an-ssr-performance-showdown
🔗 Rich's comments x.com/Rich_Harris/status/1828514846817624511
🔗 Rich's PR github.com/platformatic/ssr-performance-showdown/pull/2
🔗 Ryan's comments x.com/RyanCarniato/status/1828569089004184015
🔗 Dan's comment x.com/dan_abramov2/status/182859796...
Tune in!
---
Links and Resources:
🔗 The updated benchmark post blog.platformatic.dev/ssr-performance-showdown
🔗 The first iteration web.archive.org/web/20240827212521/blog.platformatic.dev/an-ssr-performance-showdown
🔗 Rich's comments x.com/Rich_Harris/status/1828514846817624511
🔗 Rich's PR github.com/platformatic/ssr-performance-showdown/pull/2
🔗 Ryan's comments x.com/RyanCarniato/status/1828569089004184015
🔗 Dan's comment x.com/dan_abramov2/status/182859796...
Просмотров: 2 534
Видео
Loading Third Party Assets with Nuxt Scripts
Просмотров 2,4 тыс.19 часов назад
Almost every app built loads third party scripts - no matter if it is about analytics, consent management, chat widgets or a RUclips embed. But third party assets pose various issues, from privacy concerns (hi GDPR) to performance impacts. Luckily, there is a new module to solve these issues! Let's take a look at nuxt/scripts in this video. #nuxt #performance #webdev Links and Resources: 🔗 10% ...
What is BFF?! (With Nuxt, Nitro and h3)
Просмотров 6 тыс.14 дней назад
🔗 10$ off for Michael's Nuxt Tips Collection with the following link and code DEJAVUE michaelnthiessen.com/nuxt-tips-collection?aff=plY9z * 🔗 10% off for vuejs.de Conf with Code LICHTER conf.vuejs.de/tickets/?voucher=LICHTER * Links and Resources: 🔗 Code TODO 🔗 h3 h3.unjs.io/ 🔗 unstorage unstorage.unjs.io/ 🔗 Nitro nitro.unjs.io/ 📺 @DejaVueFm #E022 - Signals ruclips.net/video/uqxgoeTtloA/видео.h...
Nuxt with OTHER backend frameworks?
Просмотров 4 тыс.21 день назад
Nuxt and Nitro are dream team. But throughout the time, many people wondered if you could use Nuxt also with another backend framework - without using a separate instance of course (as that works anyway). So, why not giving it a try? In this video, we try to get three different backend frameworks up and running, from classic (but old) express, fastify over to "bleeding-edge" Hono. #nuxt #vue Li...
Are Front-end frameworks a security vulnerability by default?
Просмотров 3,4 тыс.28 дней назад
When building modern web applications, more and more people utilize front-end frameworks like Vue or React and their meta framework equivalents, namely Nuxt, Next, Sveltekit, Remix and others. But do these frameworks bring inherent security risks? We will have a look at that in this video! - More info like chapter marks coming later on 👀
Redirects in Nuxt 3
Просмотров 2,6 тыс.Месяц назад
Redirects are essential for web applications, at least at some point when a migration has to happen or SEO should be improved by having more descriptive URLs. #nuxt #vue Links and Resources: 🔗 10% Off for vuejs.de Conf with Code LICHTER conf.vuejs.de/tickets/?voucher=LICHTER 🔗 Code github.com/manniL/alexander-lichter-nuxt-3-redirect-module-diy 📺 @DejaVueFm #E019 - Nuxt Tips you Have to Know ruc...
Caching in Nitro 💾
Просмотров 2,9 тыс.Месяц назад
Caching in Nitro is one of its key aspects. In this video, we have a look at how to achieve caching in your Nitro-based application. Also works in Nuxt! #nitro #nuxt #vue Links and Resources: 🔗 10% Off for vuejs.de Conf with Code LICHTER conf.vuejs.de/tickets/?voucher=LICHTER 📺 @DejaVueFm #E018 - Insights from the Nuxt Team Retreat Chaptermarks: 00:00 Intro 00:11 What is Nitro special about 00:...
Route Rules in Nuxt - SSR, SSG, ISR and more
Просмотров 3,1 тыс.Месяц назад
Nuxt supports "Hybrid Rendering" - a technique to mix various rendering modes in a single application. From the dashboard behind a login as SPA without SSR, over to caching and even prerendering pages, a lot is possible. Like... removing JS alltogether 😲 Watch the video and figure out how to set things up, how route rules work and which are available #nuxt #vue Links and Resources: 🔗 10% Off fo...
We have to talk about Rendering Modes...
Просмотров 3,5 тыс.Месяц назад
Nowadays everyone talks about "SSR" - but do people *actually* talk about the same rendering mode there? Or is it what they actually want or need? Same applies to all the other acronyms, from ISR over to SSG. And especially when talking with people not using a JavaScript Meta Framework, these terminologies might get a somewhat new meaning. Check out the video to make sure you have the overview ...
Compatibility Date in Nuxt 4 and Nitro
Просмотров 3,3 тыс.2 месяца назад
📅 Huh? Were you also asked to provide a "compatibilityDate" when upgrading to Nuxt 3.12 or later? And also wondered what it is about? Then fret no more! In this video, the whole concept behind compatibilityDate will be explained - why it is necessary, if you should set it already and how providers play a role! Key points: ✨ Why was compatibility date introduced? ⚙️ What does it change for me? ‼...
Patching Packages - The ULTIMATE Guide
Просмотров 2,2 тыс.2 месяца назад
🩹 Found a bug in a package and want to fix it locally? Waiting for a fix that wasn't released yet? Don't worry, you can apply all these locally to the packages in your node_modules. In this video, a guide for all major package managers showcases how you can patch your packages locally, why "doing it manually" is not a good idea and which consequences local patches might have. Worth watching for...
NEW Folder Structure in Nuxt 4
Просмотров 13 тыс.2 месяца назад
📂Nuxt's folder structure is well-known to everyone using the meta framework. But in Nuxt 4, it will be slightly changed. In this video, you'll learn how the change looks like, why the team decided to change the structure and how to easily migrate over. So easy, that it'll be done in just a couple of minutes Don't believe me? Then tune in now! 👀 Key points: 4️⃣ Why the new folder structure? ✨ Ho...
Dynamic Rendering in 2024 - SSR only for Crawlers?
Просмотров 2,8 тыс.2 месяца назад
🔍️ SEO is crucial for public-facing applications, resulting in the need of SSR for modern SPAs. But, why not enable SSR only for crawlers so they can get all the data while the users see a plain SPA? This approach is called "Dynamic Rendering"! If this is a good idea, what Google thinks about it and whether you should use it or not will be answered in this video! #ssr #dynamic rendering Links 🔗...
Composition API vs. Options API - One API to Rule Them All?!
Просмотров 4,2 тыс.3 месяца назад
💪 This week was a lot of discussion about the two Vue APIs - the Composition and the Options API - on Social Media. Thus, I took some time to assess the shared thoughts discussions and also went a step further: I asked you why you prefer the Options API and wanted to figure out pain points you have with the Composition API. The results are all distilled in this video, including what the Vue tea...
Building a plain SPA with Nuxt!?
Просмотров 4,8 тыс.3 месяца назад
🗝️ Single Page Applications are amazing! Sometimes you simply don't need SSR at all, especially when building behind authentication. While you can use plain Vue to build a fully client-side rendered application, Nuxt is also capable of building good old SPAs (unlike other meta frameworks 👀). In this video, you'll learn how it works, what you can set up and why you should use Nuxt for it! Key po...
Adding a new nuxt.com logo with useCookie and routing
Просмотров 3 тыс.3 месяца назад
Adding a new nuxt.com logo with useCookie and routing
Store files and K/Vs in Nuxt and Nitro - Powered by unstorage
Просмотров 3,7 тыс.4 месяца назад
Store files and K/Vs in Nuxt and Nitro - Powered by unstorage
Stream VOD #006 - Building an Association Manager with Nuxt.js
Просмотров 3,3 тыс.4 месяца назад
Stream VOD #006 - Building an Association Manager with Nuxt.js
Nuxt Instance Unavailable - Async Code in Vue and Nuxt with the Composition API (+ raffle 🎁)
Просмотров 3,9 тыс.4 месяца назад
Nuxt Instance Unavailable - Async Code in Vue and Nuxt with the Composition API ( raffle 🎁)
Nuxt Test Utils - A Primer to Testing in Nuxt
Просмотров 8 тыс.5 месяцев назад
Nuxt Test Utils - A Primer to Testing in Nuxt
How to use Nuxt Layers to encapsulate your code
Просмотров 9 тыс.5 месяцев назад
How to use Nuxt Layers to encapsulate your code
Faster Nuxt Builds? 🤔 No problem ✅
Просмотров 3 тыс.5 месяцев назад
Faster Nuxt Builds? 🤔 No problem ✅
Integrating WebSockets in Nuxt and Nitro
Просмотров 7 тыс.5 месяцев назад
Integrating WebSockets in Nuxt and Nitro
😲 An environment-aware Nuxt Configuration
Просмотров 6 тыс.5 месяцев назад
😲 An environment-aware Nuxt Configuration
Avoid losing Reactivity in your Vue Application
Просмотров 7 тыс.6 месяцев назад
Avoid losing Reactivity in your Vue Application
Stream VOD #005 - Nuxt Open Source and Q&A
Просмотров 7056 месяцев назад
Stream VOD #005 - Nuxt Open Source and Q&A
Vue / Nuxt has been a high performer for so many years and too modest / quiet on this front I feel. Interesting also is ‘# years in pole position’. I feel as one of the first truely Open Source front end libraries, not enough credit is given to the little guy vs Major corps (or the people who have helped them). (I would add, Open Source, as a collective seems to be winning the day).
Good video recap Andrew. Vue + Nuxt FTW 🏔⛰
Vue and React are libraries not frameworks. Next and Nuxt are actual frameworks. Would like to see comparison between the frameworks.
I really enjoy using Vue JS and Nuxt JS in my projects and as a Turkish developer, I follow the developments closely.
I missed a heartbeat when you said scoped styles are problematic 😱
When I researched and read into it I was also shocked at first 🙈
@@TheAlexLichter I would actually really love a video about Nuxt and styles :) Scoped vs unscoped? Any performance difference? Vanilla styles, vs less/sass/stylus? Importing into a style tag (import, @use etc). Is the content of a style tag always inlined in the end or are we sometimes adding css files that need to be referenced? Do style tags work exactly the same when added to components, pages, layouts or app files? Render blocking issues and performance in general for styles. Style tag vs utility class frameworks?
@leopoldkristjansson there are 1-2 issues in Nuxt that should be fixed beforehand with regards to that but I agree! Added on the list
Hey Alexander, i have a couple of nuxt projects and i want to make a BFF from one nuxt app and use it in the other nuxt apps, but there is a problem... i lose the type safety in the other apps, i have to manually create the types... is there some way i can import the types in the other nuxt projects? or is there a plan to implement something like codegen/openapi for the types? having the types in useFetch in other projects would be ideal! any help with this is much appreciated! Thanks!
If it is a monorepo, it should be straightforward. If there are different repos, you can use Nitro's OpenAPI option to generate the types 👌🏻
@@TheAlexLichter where can i find the docs for the Nitro's OpenAPI option?
@ivanangelkoski nitro.unjs.io/config#openapi
@@TheAlexLichter Thank You Sir!
I just switched fully to Vue / Nuxt after many many years of React and next. While I truly love the JSX used in React and the way how you write components, I had so many headaches over the past years duo to weird behavior which came mostly from hooks. And I don't like the fact that state management is still not as great as in other frameworks. The switch felt so smooth and honestly I'm thinking now why this took me so many years. I heard from friends and colleagues that Vue is great, but never had the motivation for it but oh boy was I stupid. Using nuxt now daily for two months and I hadn't any impediments or so and I'm enjoying it so far.
We used Nuxt for building an LXP (Entreprise-level education and online training platform for employees), consisting of three Nuxt front-ends connected with an SSO. Nuxt is amazing!! thank you for your amazing work.
Vue es el mejor❤, svelte como siempre con su versión 5 beta en todos las comparativas, su versión estable es la 4
amazing, vue is best!
Just so you know … nuxt and vue could’ve been last and I’d still choose them
Me too
HTMX is the fastest of them all. :D
Especially when it comes to SSR 🫠 (HTMX can’t do “SSR” the way React, Vue, Svelte etc can)
Nuxt has been a pleasure to use at an enterprise level
Really glad to hear that! What did you build with it?
Yes, but there is a nuance)))
There is indeed!
Hey Alex! as always a great video <3 wanted to ask How would you approach to get an event bus in Nuxt. Recently I faced a usual situation where I wanted to listen to emit from a component in any part of my application, but didn't want to install dependencies like mitt
Thank you ☺️ I personally am not a big fan of the pattern due its shortcomings compared to eg a pinia store or composable. What would you use it for?
@@TheAlexLichter I would use it for to trigger any side effects in another part of my application like recalculate stocks when user sets nearby store address but in certain pages. Would love to hear your suggestion and is the $emit with its name available under global nuxt instance??
@@bishal_mishra99 I think pinia store should suffice your requirement
Nuxt+Vue is love 💚
💯
🎉🎉
✨
Interesting, can you open source the comparison you did between angular, next and nuxt? So that everyone can see the code and improve it.
Yes, as soon as the thesis is published I will!
@@TheAlexLichterNice, great video by the way.
@oussaber thanks 🙏🏻
What do you think about the results?
What about Angular SSR?
@alexanderkim7241 see the linked PR (and also the mention in the video)
I really like these kinds of 'Practical Example' videos that can be applied to real-life scenarios. I suggest making some short code review videos as well.
Thanks! I might do these on stream and release a VOD here 👌
Nice video as always but the example with title passed as props and then mutated thanks to toRef is not the best as props shouldn't be mutated.😊
Yes, that's true! Also mentioned that in the comments before. On the other hand, a `computed` is less performant (+ there is the readonly helper)
excited to see nuxt 4
Can't wait either! And so many pieces are already available 🙌
First of all thanks for the content. Considering the best practice url proxy method which uses a catch-all route in server/api/ path, how does these 2 play together? Also since a catch-all server route can transform all outgoing requests, is moving general logic like authentication headers to this same route viable?
Laravel Mentioned.
This content is so informative and did solve my problems !!! Thanks a lot
You are welcome 👌
this guy needs to learn how to talk slowly, like its funckin annoying,
"This guy" suggests 0.5x speed then 😁
how can i use runtimeConfig outside of nuxt app? For example i have a couple of services that rely on the .env and they are outside vue component/composable, but i can only use useRuntimeConfig inside of a component or composable… is there a solution for this? Or any recomended approach.. Thank you!
Not really, you can’t directly. It needs the context of Nuxt/Nitro You could pass the values when calling the fn/service, eg in a plugin or on demand
@@TheAlexLichter got it, thanks for the reply! also is there any downside in using the .env variables directly in the service? example: const service = new Service(process.env.MY_VAR)
Mainly that you won't be able to change them at runtime (only during build)
Great video! Saved me a lot of time, scrolling through the github comments, trying everything on my own! More of that! :D
@TheAlexLichter Is there a way to get all caches in a Nitro/Nuxt app? My use case is that I would like to build an admin interface, where you can invalidate caches :)
You certainly can. NuxtHub is also doing that 👌🏻
Got here thorugh the link in Nuxt official docs. Great work!
Thank you 🙏🏻
thanks bro
Sure thing 👌🏻
Would calling load function multiple times have any side effects? Or would it be just a NOOP ? I used to manually store the now deprecated $script promise and would return if fhe script was not loaded yet, to prevent duplicate loading of script. Would this new approach suffice this kind of use case? Thanks for the video! ❤
I'll look but my first question is can the utils folder have nested folders to organize my api's and still benefit from auto-imports in the server andpoints??
You'd have to add them to your auto imports then but yes, that works See ruclips.net/video/FT2LQJ2NvVI/видео.html
That's nice! But lets take Hotjar as an example. There is a Hotjar Nuxt Module available. Should I rather use useScript or the available module? Do Nuxt modules (usually) use useScript under the hood?
As Nuxt Scripts is rather new, most modules won't support Nuxt Scripts at the time of writing. I see two ways there though: 1) If the module is doing not much on top besides configuration + loading the script, a nuxt/scripts registry script would be the way to go and the module wouldn't be needed 2) If the module does more beyond that (think of e.g. setting up a custom configuration, adding plugins and so on), then the module should use Nuxt/Scripts at some point 👍
Hi Alexander, If it's possible, please make a video tutorial about nested dynamic route I mean like this: /categories/slug/slug to display like this: /categories/car/ferarri
Sure! What would you like to know about nested dynamic routes?
@@TheAlexLichter I want to two slugs alongside together in route like this: /product-categories/slug/slug
No need to use partytown anymore?
Different use case. Scripts in a web worker still won't block the main thread. It is also on the roadmap for nuxt scripts github.com/nuxt/scripts/issues/182
@@TheAlexLichter Great, thx!
That thumbnail though. Fits the „let’s dive right into it“
😁😁😁
When I want to load recaptcha via useScript it ends up with CORS error which I didn't get via useHead
This channel is the best way to get updated and sold on the new features of nuxt. This looks great. I’d love on those videos that you talk a bit about the security (especially of api keys, it’s always the little worry that creeps around)
Trying my best to keep you up to date on them 🙌 I've covered the API key topic in my very first video (ruclips.net/video/2tKOZc3Z1dk/видео.html) - is there anything missing from your POV which I should cover besides that?
@@TheAlexLichter hadn’t see that video ! It’s a good one. In the rendering modes video, I wondered if some rendering modes would change the readability of an api key that’s not public. I also wondered if there was a way to hide a non public key in a plugin to avoid creating an api layer (though now I don’t see the use case for that scenario)
hey Alex, looking for ideas on the best way to write test for the server folder in Nuxt
Oh wow, I'm actually on a new project and started adding external scripts with useHead(). That does work, but I had the same thoughts regarding SSR, performance and so on. It also felt a bit clunky putting it all in useHead() and have limited possibilities to interact. Honestly, this new module is nuts. I'll definitely give it a try. :) Especially looking forward to test the specific composables for GTM etc and see how that works.
This module is awesome
Right? Definitely a must-have!
instead setting up the trigger option, could we alternatively add @mouseover to the h1 and call the de-structured load function on mouseover? ie is the trigger config option doing anything additional/magical that I should be aware of?
Yes, you absolutely could! This is more for convenience 😊 The util is also more interesting if you use `trigger: 'visible'` (instead of rolling your own intersection observer), or even a combination of possible triggers
Link to the implementation of useScriptTriggerElement github.com/nuxt/scripts/blob/99626a261e26982101b92129eb833ffef9853967/src/runtime/composables/useScriptTriggerElement.ts#L49-L72
@@TheAlexLichter oh nice! Thanks! Visible makes perfect sense. For the mouseover using the vue event listener seems more idiomatic to me
Too many things are called "run"
Yes, that's true 🙈 Though everything except the `run: displayWidget` is the same "run"
Is it possible to use a catch-all route (server/api/[...].ts) and a specific route rule in the config at the same time? I want to cache one particular route (/api/settings) 🤔
Then you'd need a dedicated /api/settings.ts file (which can do the same as the catch-all) - yes.
Perfectly for every web developer living in Europe
I'd even go further and say for all of them. Perf and privacy gains help us all 💚
Great. Would have bet for this topic to be covered from you this week ;-). I saw it first in vuejs amsterdam. Great to know that I can use it now in my projects.
Oh yes, indeed. The first announcement was earlier this year - really happy that it is out now 🎉
Wanna give Nuxt Scripts a try?
Since Nuxt Scripts is in beta status - is it mature enough to use in production? Are there lots of changes to be expected?
Thanks for this. I'm thinking this could be great for simple data-logging without needing to set up an external database. Perhaps logging IOT sensor data that's coming in via Nuxt API endpoint, then graphing that stored data on the frontend.
Oh yes. Sound like a great use case if K/V is enough 👌
Thanks for this valuable content. This channel is gold for Nuxt developers.
Glad you think the content is valuable 🙏 That's the goal ✨🙌