💚 Ready for a new video this week? I'll showcase FIVE features that
@vuejs
lacks (in my opinion) - and it isn't unrealistic we get most of them in the future 🔥
Anything coming to your mind? You should check out if it made it on the list
Premiering in 45m - Link in next Tweet!
Performance in
@nuxt_js
is amazing by default! But when building your app, you still have to keep quite some things in mind 👀
In the first video of the "Nuxt Performance In Depth" series, we explore the Nuxt payload and figure how to make it smaller! 💚
If you are using
#laravel
as
#api
'only', you might want to return JSON on every request, even on errors/exceptions. The easiest way to do so is using this middleware globally.
It is happening! After teasing it at
@vuejsamsterdam
and working on it behind the scenes for a while,
@dejavuefm
- the
@vuejs
podcast with
@MichaelThiessen
and me is launching 🎉
Check out the trailer on YT and all other podcast platforms
Link below!
After reaching 2k
@YouTube
subscribers a few days ago, I feel like I owe y'all a special 😁
So let's talk about organizing code when using the Composition API in
@vuejs
and what I would not let pass in a review 👀
Coding from scratch included 😎
Link in the next Tweet (algo 🙄)
Nitro (
@unjs
) 2.9 brought amazing features recently, one of them being (experimental) WebSocket support
As many of you are interested in integrating two-way data flow via ws, I'll show you how you can do this in
@nuxt_js
+ Nitro!
Premiere in 30 minutes (3:30pm CET) - Link below
Time to talk about
@nuxt_js
4's new directory structure in this weeks video - which you can use today already!
🤔 Why is it there?
✨ Which benefits does it bring?
👀 How to migrate?
🤯 Will it be easy?
Figure all that out in <15 min (or even less) - Link below!
Did you know that
@nuxt_js
allows you to auto import files from arbitrary folders? You just need a few lines of configuration for it 🙌🏻
Be aware this does *not* override already auto-imported folders like `composables` or `utils`.
Playground:
💚 Nitro and
@nuxt_js
are a dream team. But in the last months, more and more people were asking if they can user other backend frameworks with Nuxt. While it is easily possible as a separate instance, I wondered - can we have them *inside Nitro*?
Find out in today's video 👀👇🏻
New friday new video! On the list today: The useState() composable in
@nuxt_js
. Find out when you should use it, how it works *and* if it is a suitable alternative to Pinia 🍍
Also, the winner of the
@vuejsamsterdam
raffle will be announced in there 👀
Link in the next tweet!
Since late 2017, I always tried to contribute to Nuxt in the best way I could - no matter if as contributor, insider, maintainer or core team member.
Very happy to be officially part of the
@nuxt_js
team and work together with brilliant minds on the future of the framework 🔥
We're delighted to welcome three new contributors to the Nuxt team:
@TheAlexLichter
,
@li_hbr
and
@harlan_zw
.
I'm grateful for their contributions to
@nuxt_js
so far and can't wait to see what is to come ✨
This week's video is all about 🍪 and calling APIs in
@nuxt_js
. Learn more about the not-so-well-known methods useRequestFetch and event.$fetch and understand when to use which. Diving into the source too!
Also helpful for all
@nitrojsdev
and H3
@unjsio
users ;)
Link below! 💚
This week's video covering an implementation of the Repository pattern in
@nuxt_js
. But even if you don't use the pattern, it will be worth the time as we will use a custom $fetch instance to reach our goal! 👀
Tune in for some data fetching magic ✨
PREMIERING NOW (link below)
💻Almost weekend - but before, another video is up!
This week we will take a look at reactivity in
@vuejs
and see how to maintain reactivity when passing values to composables or as props
If you ever had troubles with reactivity, this is worth checking out 👌
Link in next post
✨ Ever head of the term "BFF" in web development and wondered? Fear no more - in this weeks video we will have a look at the Backend For Frontend pattern, discover when to use it and why it can be useful.
And of course, we implement it with
@nuxt_js
, Nitro and h3
Link below!
💻Yet another Friday! Almost time for the weekend
But before, we have a look at one
@nuxt_js
3.10 feature, which helps improving
#performance
Build performance to be precise!
The experimental sharedPrerenderData option can cut down your prerender time too 💚
Link below 👌
✨Time to talk about the newest official
@nuxt_js
module - Nuxt Scripts!
And not only covering why it is useful and what it does, but using the underlying `useScript` composable to load a *custom script* right into a demo application.
Don't miss it out! 💚
Link below 👇
Today is one of these days...
🔴 Reached 8000 subscribes on
@YouTube
🟣 Finally reached the goals for becoming a
@Twitch
Affiliate
🟢
@vuejs
/
@nuxt_js
videos and
@dejavuefm
podcast episodes ready for the next 4 weeks
🌞 Time for vacation!
Thanks everyone for your support 🙏🏻
Some time as passed since the last 🔥
@nuxt_js
tip. It's time for another one!
Did you know that you can use ESM Syntax in your nuxt.config.js (import/export default) out of the box? 🤔
Same goes for serverMiddleware, plugins, modules and so on 🙌🏼
PS: It's recommended to do so
Testing is important to ensure a reliable application - but nevertheless I've seen quite
@nuxt_js
projects without tests.
But you can change that now! 💥
This weeks video covers the Nuxt Test Utils which help you getting started with E2E and Unit test your Nuxt app!
Link below
👀 Long time awaited, finally it arrived! A video around Route Rules and hybrid rendering in
@nuxt_js
We check various rules, try them out and see what they do, from removing all
#javascript
over to sophisticated caching!
Tune in now (link below)!
Seems like the
@angular
team is planning to evaluate integrating Nitro (
@unjsio
)!
It is listed under "future work" on the roadmap page.
Excited to see what their updates on it will be 🔥
🔥 Did you know that
@nuxt_js
comes with a built-in profiler for your webpack process? Use `yarn build --profile` (or the npm equivalent) to get loader stats and find out what slows down your build!
Thanks to
@_pi0_
for Webpackbar and the included profiler 🙏
It is one thing to improve the HMR performance + DX of
@nuxt_js
in a PR - but it is another thing to submit PRs to all public repos so these projects benefit from it *straight away*.
Thanks
@danielcroe
🔥
Related PR:
🔥 It's time for another Nuxt tip!
Some modules (like nuxt-purgecss or nuxt-bundle-buddy) should only be used in prod *or* dev, not both.
Though most of the modules have a way to toggle themselves, you still have to include them in your direct dependencies.
Not anymore! 🎉
Vue's composition API provides amazing reactivity blocks, most commonly ref and reactive. But did you know there are others like shallowRef? 👀
No? then check out this weeks video, including
@vuejs
&
@nuxt_js
examples, as well as when/why to use it ✨
Nuxt developers know that
@nuxt_js
and Nitro go hand in hand.
But I noticed the separation between both blurs & questions arise:
How to use composables in /server?
What app parts "are Nitro" and which are Nuxt?
Find out the answers in this weeks video
Today's 🔥
@nuxt_js
tip shows you how to integrate a simple logger for the server-side of your app!
With a few lines you can log all requests that actually hit the server of your app and trace 404s or 500s
As usual, with a
@codesandboxapp
to play around:
Another Friday, another video! This week it is all about redirects in
@nuxt_js
. Together we check out how to redirect simple pages, wildcards and even more complex logic in your Nuxt application, without the use of any external modules!
Premiering in ~20min from now 👇🏻
🚨 Ever initialized a
@nuxt_js
project and wondered about some deprecation warnings of deep dependencies?
In this weeks video, we look into them together and find out what they mean + if you have to worry!
PS: This even applies to any kind of project!
Link below as usual 👇
The next
@nuxtjs
release will include a small but meaningful DX feature 😏
No more (s[ac]|(p(ost)?)?c|le)ss|styl(us)? extensions are needed for global CSS setup 👏🏼
PS: Yes, this regex matches all the extensions 😜
New year, new... video! To start with some new years resolutions, I hope you put "fixing useFetch" on the list after the clip 👀
Check out why you use
@nuxt_js
's useFetch composable the wrong way (I honestly hope you don't misuse it 😛)
PREMIERING NOW
After quite a while, the `nuxt-purgecss` module supports
@nuxt_js
3 now 🙌
Feel free to give it a spin and report any issues.
And to all the Nuxt 2 users of the module: Do you want to see an updated version for Nuxt 2 as well? ☺️
Did you ever want to define your
@nuxt_js
config based on your node environment? For eexample to change the base URL in your test setup, or enable caching only in production?
You actually can without using NODE_ENV.
How? I'll show you at 3pm CET (in ~15 minutes) - link below🎉
It is Friday again! Time to talk about
@nuxt_js
plugins - but not about what they do or why you should use one, but about a *new* syntax to write them.
✨The Object Syntax ✨
Learn why it is useful, which features it comes with and why YOU should use it now!
Link below 🙌
🤯 Did you know that you can build a plain
@vuejs
SPA with
@nuxt_js
? No?
Luckily you don't have to use SSR all the time but only when needed, still having the option to upgrade
Check out how it works, why you should do it and how easy it is in today's video 💚🔥
Link below!
It is time for another blog post, related to
@vuejs
and
@nuxtjs
!
Loading (asset) images with a dynamic path 🔥
It's a quite common task but also one that many ppl ask help for. I explain why it's different from fixed paths & a bit about the internals.
I am certain some of you already know today's 🔥
@nuxt_js
tip but this was often a topic in the Discord recently.
The official
#nuxtjs
axios module has shorthand methods that gives you neat the data *directly*. 🌟
When using the basic axios, you have to use `data` otherwise.
After all the discussions that happened this week in the
@vuejs
universe, I'm looking forward to follow up in tomorrows video 👀
A little sneak peak with the graphic below 👇👇👇
📅 Upgraded your
@nuxt_js
version recently? Good! But were asked to provide a compatibilityDate?
And wondered what/how/why?!
Don't worry, this week video got you covered on all details around the new "versioning system" - and why SemVer is not enough
Link below 👇👇👇
An amazing feature of
@nuxt_js
is Nuxt Layers, aka `extends` ✨
But there are still some question revolving around it: When to use it? What can I use it for? And how do implement it?
This weeks video will bring answers to all of these questions ✅
3pm CET as usual - Link below
Going
#JAMstack
with
@Netlify
and
@nuxt_js
💚
Don't know what JAMstack is? No worries, I got you covered!
An introduction + my experiences, recommendations and impressions shared in the latest blog post over at
Spoiler: Yes, JAMstack really worth it!
Thanks for having me
@vueconfus
🔥
Hope I was able to tell you a thing or two you didn't know about
#seo
before!
My slides + speaker notes are @
If you have *feedback* or any questions, feel free to DM me or ask in person ☺️
#vueconfus
After showcasing it in my
@NuxtNation
talk yesterday briefly, what could be better than making a full video about
@nuxt_js
's new getCachedData option?
Together we will have a look at what getCachedData does, when it is useful + implement own caching 🎉
Time to learn about a crucial thing in
@nuxt_js
- which command to use when deploying your application
Yes, the decision is between nuxt generate and nuxt build - but what's the difference between them? And when to use which? Does one have drawbacks?
Find out in the video below
💾 Ever wanted to figure out what useStorage in
@nuxt_js
does and what
@unjsio
package is powering it? Get a nice overview in the latest video!
Live now, link below!
Yes, Nuxt 3.12 is out 🔥👏🏻
Meaning you can now opt in to some of the upcoming Nuxt 4 breaking changes already!
Check out the blog post in the tweet and ☺️
Have you asked yourself how to merge your CSS into a single file in your
@nuxt_js
app? It got a bit more complex in 2.x but is still possible! Thanks to
@ClarkDu_
for presenting this neat solution 👏
Code ready to copy:
🃏 Today we have a look into Dynamic Components in
@vuejs
and
@nuxt_js
. Learn how to use them, the difference between direct imports and importing the components lazily as well as discussing global components.
All that (and more) explained in this weeks video ☺️
Link below!
It's Sunday! Be lazy and relax today. Because I am lazy often myself (i.e. when I have to c&p stuff over to all my projects), I've released a new
@nuxt_js
package! 🎉
nuxt-webfontloader - A wrapper around the webfontloader package to load webfonts async
And here is blog post number two of the big website launch week! 🎉
We discuss how we can disable or enable Server Side Rendering in a
@nuxt_js
application dynamically.
Some of you might know one way - but did you also know there is more than just that?
Haven't blogged for a long time but the next article is finally here🔥
It's about
@vuejs
hydration (when using SSR), two mind-boggling errors and how to solve the issue. Especially interesting for people using frameworks like
@nuxt_js
or
@gridsome
I'm more than sure most of you really like using the Vue Composition API - I do for sure 🔥💚
But did you ever wonder "when to composable" and when your function is just that - a plain old function?
If so, my new video might be for you 🎉
15 minutes to go for this weeks video! And yes, it is time to talk about the two APIs in
@vuejs
(not that we didn't do that enough this week, huh 😁)
We will have a look if the Options API will go away, why to use which API + some opinions!
Premiering 4pm, Link below 👇👇
Do you use
@WebStormIDE
(or another JetBrains IDE) and miss import autocompletion for
@nuxt_js
? No worries!
🔥 Add a "dummy" webpack.config.js to your project root and add the aliases (~, @, ...)
Mine can be found at and should work for default projects
It is Friday! So time to talk about Caching in Nitro (
@unjs
) - from route rules over to defineCachedHandler and more!
Also covering cache invalidation 👀
The best: all applies to
@nuxt_js
too 🔥
Tune in now (link below) 👇
Thanks at lot for having me at the
@WeAreDevs
World Congress at the
@heisedc
developer area talking about
@nuxt_js
!
Slides + our live coding endeavors can be found @
PS: If you want to look what we could have done further, check out the `further` branch!
A common issue when using async code in
@nuxt_js
is "Nuxt Instance unavailable".
The reason behind the error it is based on how Vue and Nuxt handle async composables (and similar).
So... time to Learn the backgrounds and to fix it 👀
Premiering in ~30 min - Link below
👀 Time for the last video of the year!
After discussing Nuxt & Nitro last week - today's clip will cover an extensive overview on proxy strategies for your
@nuxt_js
app.
➡️ We go through the 4 common strategies and figure out which you should use!
🎉 Exciting news! Next week will be the big launch for my brand new website
And it'll be a whole LAUNCH WEEK 💚
🚀 Mon: Website Launch + blog post
✍ Tue: Blog post
#2
✏ Wed: Blog post
#3
🎥 Thu: Open Sourcing the site + Launch Live Stream
🎁 Fri: Surprise
Sneak peek below 👀
This week we talk about
@nuxt_js
's runtimeConfig option again - more precisely about the MOST COMMON mistake I've seen in projects so far when it comes to environment variables 🤯
Check out if you make the same mistake and how to fix it! 👀
If you have missed the video this Friday, fear no more!
The latest clip shows a deep dive into
@_pi0_
's experimental
@nuxt_js
build cache module, allowing extremely fast Nuxt (re-)builds!
Check it out for an easy way to save time and money 👀
Link below!
↪️💚 I know, some ppl might still be migrating to
@nuxt_js
3 but version 4 is coming slowly but steadily!
But did you know that you can *already migrate* to the next major version TODAY? 👀
Learn how in this weeks video and get started right away!
Link below
Did you know that
@nuxt_js
comes with
@PostCSS
(preset-env) and therefore
@Autoprefixer
out of the box? 🔥
You don't have to add it to the postcss plugins and can use the `build.postcss.preset` option for configuration instead 🙌🏼
More in the docs:
Have you ever tried Bundle Buddy? It's a nice UI bundle analyzer to find out duplicates in your build (and optimize your chunks).
I've created a
@nuxt_js
integration so you directly start optimizing your bundles!
🎉 The Surprise dropped!
🚀 To conclude this amazing launch week, don't miss out my very first video on my own Youtube Channel: "Is
@nuxt_js
3's runtimeConfig UNSAFE?!" 🔒🔍
Learn more about sharing and hiding API keys with/from the frontend 🙌🏻
A bit later than usual - but here we go - another video is ready!
The second video of the Nuxt Performance In Depth series will cover the `Lazy` prefix for components, what it does and when you should/shouldn't use it.
PS: Thank for all the feedback 💚
Ever used classes in
@nuxt_js
and were frustrated when using SSR? Maybe even saw the dreaded error message from below?
Check out today's video and figure out how to avoid it and even use classes for your state server side rendering 🛠
Link, as usual, in the tweet below!
Finally the first episode with
@youyuxi
on
@dejavuefm
is out! Super curious what y'all think 👀
And also stay tuned for next week where the future of
@vuejs
will be covered in part two!
For the 15th episode of
@dejavuefm
,
@TheAlexLichter
and
@MichaelThiessen
meet up with no other than
@youyuxi
himself!
The three talk about the last 10 Years of Vue.js: From Vue's inception over to Vue 2, how the Composition API came up and if Options API will stay
Link below 👇
One week ago, the three days of
@vuejsamsterdam
and
@devworld_conf
(including
@JSworldconf
) ended. Three days of meeting old friends and new faces, announcing friends on stage and simply having a blast
Let me share my experience with you in this thread 🧵
Spoiler: 🎉🎉🎉
So excited to see the first actual episode out there 🙌🏻
Give it a listen, let
@MichaelThiessen
and me know what you think about it and drop any kind of feedback you have 🔥
👉🏻👉🏻👉🏻
@vuejs
has a podcast again!
And it is time for the very first episode of DejaVue! 🥁
Starting strong with an interesting topic,
@MichaelThiessen
and
@TheAlexLichter
discuss Server-Side Rendering from why you need it to when it is useful and the pros and cons of SSR with
@vuejs
and
@nuxt_js
🔥
Link below
Let’s get it started! So many enthusiastic people at
@vuedayit
. If you have any questions regarding Nuxt or want some stickers (😏), just talk to me! I’ll be around all day 👌🏼
Folks, thanks a lot for having me on
@vuejsamsterdam
! 🙏
Hope I was able to answer all your questions and to give you an insight or two regarding
#seo
in a
@vuejs
(or
@nuxt_js
😏) world!
Slides:
If you have more question, feel free to answer here or DM!
Thanks a lot for having me
@NuxtNation
! Hope y'all will use `extends` now 👀
Below, I've attached the link to the code examples + slides 🙌
And as usual - please share your experiences - good *and* bad! Looking forward to hear from you 👌
Next up on the Nuxt Nation virtual stage with an interesting topic, Multi-variant apps with Nuxt 3 is
@TheAlexLichter
🔥
We’re learning how to extend Nuxt apps based on another project using Nuxt 3's `extends` key 💡
Join Alex’s live talk to learn more:
👑 Let's have a look at the SSR performance of the popular front-end frameworks out in the wild - using the "SSR Showdown" benchmark from
@matteocollina
Find out which framework has the best RPS, why SSR performance is beyond that metric and what the results mean 👀
Link below!
I had the honor to close two awesome
@NuxtNation
conferences days! 🎉
In my talk, I shared 8 (and a half)
@nuxt_js
“gems” - features and improvements that are not as well known as they should be!
Slides and results of live coding are available at