Vue Server Components Changes Everything About Nuxt and Vue!

Nuxt and Vue server components are here! How do they stack up against Next.js server components? What are the drawbacks? In this video I explore Nuxt server components and I create a small application app with it using OpenAI GPT, and AWS Amplify.
Join this channel to get access to perks:
/ @programwitherik
👉Sign up for my mailing list and get neat stuff!
bit.ly/3Umk7sW
👉 Need some help with a project, level up your skills, React, Next, Vue, or Nuxt? Check out my 1-on-1 mentoring!
mentors.to/erik
Follow me!
/ erikch
Links:
github.com/Eri...

[@ProgramWithErik]

Hey! Let me know what you think! Sorry for the slight fuzziness, not sure how that happened.

[@rogue.ganker]

Single file components in Vue or Svelte look like PHP 20 years ago. Block of code at the top of the file importing functionality, block of html echoing variables below. We've come full circle

[@ProgramWithErik]

lol

[@nicolas_vl]

TRUE

[@phoneywheeze]

php ran on the server side, svelte doesnt have server components

[@rogue.ganker]

@@phoneywheeze sveltekit does

[@sujit_webdev]

Thanks for sharing @rogue.ganker ! Honestly learning these front-end components feels like a waste of time as they reinvent their API's every couple of months

[@squidproxy136]

Server component like ssr but without hydration?

[@VitorNeves]

Erik, I would say that the alternative to a copy of the server component is to wrap the slot with
I'm saying this because I'm working on Vue 3 SSR project and when the initial data received from the server it's different from the one rendered by the client it cause the hydration mismatch and what we do in that scenario is to wrap the block of code or component with the

[@DownthunderAu]

Thanks mate. I think that's a good practice (as it's also very declarative for everyone else touching that part of the codebase).

[@spikezkid022]

Hey great video! What theme are you using for vscode?

[@PeterAyeni01]

I love Vue I just felt it hard for the framework to innovate without waiting on React.

[@twitchizle]

Unrelated to vue, but i just understand what server components are, thanks to you. Im enlightened.

[@lakshkataria]

Hey Erik. I’m new to Nuxt3 and your videos are super helpful! I had an unrelated question though. I created a project in Nuxt where I pass certain static images to use as backgrounds and in cards. These work perfectly in the dev environment but are not served in the build or while deploying. Do you know why this is? All images are stored in my public dir.

[@ProgramWithErik]

Hmm, I would check with the Nuxt discord for help. They are great therr

[@lakshkataria]

@@ProgramWithErik thank you! Keep making amazing videos, I need to keep my job 😄

[@KiwiAndCurry]

Try to always use img elements for images, much better for SEO. NuxtImg component (absolute for bg image) will solve your problem, keep your images in public.

[@0-Will-0]

Is it likely that 95% of sites will manage fine with SSR and server components just for a few edge cases? I am missing the advantage so far.

[@eddicussoftware-za6690]

My thoughts exactly! I fail to understand the craze and the mass migration - save for the (very few) cases where the gains were clear and necessary

[@tanzimibthesam5861]

Why not just keep seperate backend and frontend?

[@ProgramWithErik]

I think you can do either

[@Vidzhut]

Hello Erik, Nice tutorial. Any plans in doing tutorial on stripe elements + nuxt3?

[@ProgramWithErik]

I'll look at it

[@yokevinmendez]

It'll be handy if the server component works with Head and Meta components for the SEO, I just tried with it, but, it doesn't work. :( I hope that nuxt team added this feature in the future

[@whoknows3679]

have u tried deno fresh?

[@ProgramWithErik]

How is it ? No

[@heroe1486]

Ditched React and Next(if we can still call it Next) after years because of this, not even mentionning how buggy it is according to most users, at least Vue doesn't force Nuxt on you unlike React and its "If you build apps you should use a framework".

[@hasanparasteh5242]

top level await? How's that possible??

[@ProgramWithErik]

For Server Components? Yeah, that's what adds in Suspense for normal Vue components. vuejs.org/guide/built-ins/suspense.html#async-dependencies

[@greendsnow]

I started learning Wordpress... I mean... It's the future.

[@ProgramWithErik]

Haha

[@sujezz]

No worries, svelte just adopted annotations from php. Which I hated in php and I'm glad php has now attributes. But here we are again.

[@bommambo7425]

gosto muito dos teus videos assisto apartir de Angola

[@ProgramWithErik]

Thanks to watching!

[@bommambo7425]

@@ProgramWithErik eu é que agradeço 🙏☺️

[@marlonjerezisla6496]

Pls stay away from server components, this is just vercel wanting to make some cash. This server components is viable only for an small number of scenarios.

[@squiggleturtle]

Can you please elaborate on this, I really can't follow what's happening

[@виртуоз_ру]

👍