Building a plain SPA with Nuxt!?
Вставка
- Опубліковано 9 лип 2024
- 🗝️ 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 points
💡 Setting up Nuxt to render an SPA
🤔 Find out why you should use Nuxt to build plain old SPAs
🫳🏻 Optionally avoid rendering for all static HTML files
---
Links
🔗 Code github.com/manniL/alexander-l...
🔗 Nuxt Deployment Docs nuxt.com/docs/getting-started...
📺 @DejaVueFm #E010 about Design Patterns • DejaVue #E010 - Design...
Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up!
🌐 Connect further:
Website: www.lichter.io
Twitter/X: / thealexlichter
Twitch: / thealexlichter
---
Chapters
00:00 Intro + Setup
01:04 Demo Application
01:47 Running nuxt generate
02:32 Disabling SSR
04:56 Clear all routes to prerender
06:25 Is it an SPA now?
06:42 Hash mode for the router
08:39 Why should you build a plain old SPA with Nuxt?
10:49 Wrapping up! - Наука та технологія
Bro on next friday you have to make a full detailed video on different rendering modes and how they works and how we can utilize them through routeRules
Yup, this will definitely come ☺️
You always surprise us with amazing new content, Alex! Haha!
Thank you so much Gabriel 🙏🏻
Always wondered how to build a SPA with Nuxt, thanks for sharing!
There you go!
No problem 👌🏻
Awesome! Thanks for video! 👏
No problem at all ☺
finally something valuable in SPA, learned something new for capacitor js application will try
Exactly! Fits the use case perfectly
Yes! It's friday... sure the weekend is almost there, but also another great video from Alex! ⭐
Thank you David ☺🙏🏻
Now it is time to enjoy the weekend 😛
Классная шапка 👍
Nice video ! 🔥
Thank youuu 🙏🏻
Okay, this is clear enough.
Now, can you teach us on a situation you mentioned:
At some point we would like to have some SSR content (pages).
Can we use this setup and how, ideally add why an when we should consider that (some examples).
Subliming to 10-20 minutes, like in this video would be just awesome!
I would like to maybe abandon GatsbyJS and you might be a good reason why should I consider NuxtJS. :)
Best regards!
That’s one the list for a while! Hope I can make it soon 👌🏻
i really love ur content and as a nuxt.js developer always watching it, thank u for creating these videos ❤
Thank you so much for the kind words 🙏🙏
As always great content! Thank you, Alex ♥
Though I have a question regarding routes lazy loading in Nuxt. Away from the 'lazy' prefix for components, what about routes? I know that by default Nuxt configure all pages to lazy load, but where can I read more on that and how to have more control over that behavior, like lazy load/ prefetch only specific pages, etc.
Glad you enjoy it - you are welcome 🙏🏻
Routes are always code-split and loaded lazily in Nuxt (best practice also in plain Vue apps btw). NuxtLink does auto-prefetch JS for routes and you can also do via `preloadRouteComponents`. Might cover that in another video!
Great video, exactly what I've been looking for.
I've been trying to make an embeddable SPA and I need to turn of all SSR, and everything else, but I also need to output all of the js and css to a single file with a predictable name that won't change on every build. is that possible?
Building all JS files into one isn’t on by default but with configuring rollup this should be possible, yes!
@@TheAlexLichter Do you have any tips on what I should be reading up on/researching to figure out how to do this?
Great content as always! I wonder if there is a way to build and have css and javascript files inline inside index.html
Thank you 🙏
That's a good question. Technically it should be possible but I never did it!
@@TheAlexLichter Any idea where should i look for build config for it ? What i want to achieve is single file offline spa page
Cool, can we do a mobile app similar way?
Yes, you can build an SPA and use Capacitor or Tauri with it 👍🏻
Where can I get that beanie you're wearing in the title card?
It was possible to get at Vue Amsterdam only I’m afraid
Well, that's disappointing.
God video
Thanks 🙏🏻
ssr: "nope!" should be a thing
Right? 😂
Feedback: Add a music as background :) … nice stuff man, keep posting it please
Might run a poll on that as I know some ppl hate it and some ppl really like it. Thanks for the suggestion 🙏🏻
@@TheAlexLichter you seem to be a person who likes details, given the lights, camera position, background setup etc … really nice work … with background music is no different … it’s all about details 🙂 … thank you for taking your time to answer this one
Please don't. Content is the king. Background music is a distraction when trying to listen what you are explaining. Great videos Alex. Keep it going the way it is. Cheers!
@@JenosMuhammed second this