This makes sense perfectly. I like it. Thx for the videos about nuxt 4!🎉
@TheAlexLichter
2 ай бұрын
Of course, you are welcome 🙏🏻 Thank you for your enduring support 🙌🏻
@_fntn
2 ай бұрын
The new changes look great to me. I'm enjoying the greater separation of concern between the front and back ends, but I'm particularly looking forward to the greater emphasis on layers. I personally subscribe to the "atomic" design pattern philosophy and I also prefer to build my own UI components from scratch. This often leads to generic/reusable components (text inputs, buttons etc.), which then become part of larger components (custom forms, page sections etc.) that are more custom and project-specific. Modules are a little abstract for my tastes, but layers are a perfect way to separate these two "types" of component from each other whilst still keeping them tightly coupled.
@thetakburger7928
2 ай бұрын
I do like the new directory structure. Thank you for the video!
@TheAlexLichter
2 ай бұрын
You're welcome! ☺️
@kolorartists
21 күн бұрын
Imho there's a **lot** of documentation needed (and currently missing) regarding the new folder structure. But I can already feel the benefits first hand on a semi-big project I'm currently migrating and especially dev-server startup times have seen significant improvements (went from an unbearable multi-minute journey to juts a few seconds in my case) Things that are imho entirely unclear: - how to handle layers (do layers need to follow the new structure too, where to put local layers, what if layers have local modules or server parts?) - what to do with local modules - where to put shared code and does that have any implications (e.g. shared types between app and server which I'd put into the rootDir?)
@EvestDev
2 ай бұрын
I would be interested in a nuxt subdomain video :)
@esorribas
2 ай бұрын
☝
@Berk45632
2 ай бұрын
YES! I am starting a big project entirely in Nuxt + Nitro. Deadline is January 2025. And there are 4 subdomain websites to build and I would really love a subdomain tutorial.
@TheAlexLichter
2 ай бұрын
Okay folks! Added to the list of topics 👌🏻
@realfranciscohermida
2 ай бұрын
Would be great to see more content considering monorepos in the future, it is great that nuxt is already it's own kind of monorepo with layers, server and app folders, but there are some existing messy projects that have separate backend apis (with trpc for example) or shared ui packages that would be interesting to see how you would structure with a new nuxt app
@TheAlexLichter
2 ай бұрын
I might make a video on it in the future! Definitely possible to use layers in a monorepo (that’s a common thing at the moment)
@chekobil
2 ай бұрын
Awesome, thanks for the video ... I think it makes total sense, the server part inside the server folder and the client part inside app folder.
@TheAlexLichter
2 ай бұрын
You are welcome! The only „overlap“ is SSRing your Nuxt app IMO but it is tricky to incorporate that in the name ☺️
@chstappert
2 ай бұрын
Waited for this one. Great vid again! P.S.: Don't forget to change the 3 in the background.... ;-) Looking forward to the release...
@chstappert
2 ай бұрын
And wahts about a "pateches" folder?
@TheAlexLichter
2 ай бұрын
Patches as project-specific and stays top-level
@linpengteng
Ай бұрын
Nuxt4 isn’t out yet, Looking forward to it~
@Kingside88
2 ай бұрын
Great! But instead of "layer" I wish they would call it "features". Because I think the "vertical slice architecture" would also make sense in nuxt
@TheAlexLichter
2 ай бұрын
Yes but then you limit layers to a certain use case, while they have multiple as discussed in kzitem.info/news/bejne/x6hr36NpmoicmXY
@Kingside88
2 ай бұрын
@@TheAlexLichter 😀Wir haben die selben Gartenstühle.
@cailliaud
Ай бұрын
Really great video ! I am just curious how will work directory like 'content' from Nuxt Content. Should it be moved to app or it will stay in ?
@phip1611
2 ай бұрын
Great video 🎉
@TheAlexLichter
2 ай бұрын
Thank you 🙏🏻
@ClausStraube
Ай бұрын
Thank you for this and the other vids 😍 I understood layers are good for sharing and reusing partial Nuxt applications within a monorepo. But in the new structure, we have a folder layer inside a single (?) Nuxt application. That makes sharing a lot harder or impossible, I guess. Is there a way to define more than one "app" like folder, or how can I reuse layers in that scenario? Or what's you solution for that problem? Thanks in advance.
@MarcoVerheul-u7q
Ай бұрын
Hi Alexander, thanks for the video. One thing is not clear to me. In Nuxt 3 you need PNPM workspace to run multiple apps sharing a single layer (for reusable components etc.). Does Nuxt 4 support this natively? And if yes, how is it supposed to work? It seems in your example that you use one layer with one app and that seems a bit unnecessary.
@TheAlexLichter
Ай бұрын
As long as you have multiple "sub layers", you can throw them into the layers folder now, yes. You won't need workspaces for that :)
@hanes2
2 ай бұрын
Nuxt overall been making great improvements. Tho the only downside I experience been SSR. Maybe it's more to blame Nitro or Node in general as in the past I generally don't use JS back-end but often more so Go or Python, but when I tried Nuxt/Nitro, it would introduce quite a lot of issues with hydration which was annoying to deal with, and on top it would use so much more resources on the server so i just set SSR: false and it's the most solid.
@TheAlexLichter
2 ай бұрын
SSR works pretty well in Nuxt IMO but there are some gotchas to figure out “how to render data” and transfer it to the client. I’ve talked about that in kzitem.info/news/bejne/tY-vq56EaYejmXY and also kzitem.info/news/bejne/xWpjtZ6iopWTnI4si=cyYdvjAVAACi-W-B a bit
@naveeng2003
2 ай бұрын
Hey Alexander, can you suggest the best practices for shared utils and types between nuxt and Nitro parts
@TheAlexLichter
2 ай бұрын
kzitem.info/news/bejne/kZWewK2jpqKGe4Y might be the way!
@naveeng2003
2 ай бұрын
That looks good, and can we auto import types as well in nuxt and share them
@linpengteng
14 күн бұрын
In Nuxt4, the util and plugin defined in ~/app/utils and ~/app/plugins, can they be used in ~/server?
@TheAlexLichter
14 күн бұрын
No, you have server/plugins and server/utils for that 👍🏻 Utils is something you can re-export (or store somewhere else if you need shared utils) too :) Also covered in kzitem.info/news/bejne/paGszX6XZopkZKA
@linpengteng
14 күн бұрын
@@TheAlexLichter thank you!
@layer8problem
Ай бұрын
How did u autofill the new component with the empty template
@TheAlexLichter
Ай бұрын
I set up my own snippet for it. Might make a video on that one 👌
@linpengteng
8 күн бұрын
About @nuxt/content, Is it not possible to use the Vue Component in the ~/app/components/content/ directory?
@linpengteng
8 күн бұрын
define it in the ~/components/content directory (when use Nuxt4 )?
@TheAlexLichter
6 күн бұрын
Please raise an issue, this should be possible via the app directory 😊
@sven.van.reenen
2 ай бұрын
Question! Great video btw if i créate a layer folder will it work out of the box with this new update? Question two haha If i have an object in My api response can i store it as ref even when the rest is shallowref?
@TheAlexLichter
Ай бұрын
1) Yes, it will! 2) How/Why would you want to store it? You could use a computed that's based on it for example. Or a watcher "transferring" the value you want over
@sven.van.reenen
Ай бұрын
Awesome! Yeah never mind my second question 😅
@businessoftechnology
2 ай бұрын
This makes me wonder if layers will allow a more nested or integrated App like experience. :)
@TheAlexLichter
2 ай бұрын
I think the layers folder is ideal to slice up an app by feature/domain/scope etc It is more for organization at the moment then „integrated apps“. But who knows what’ll come!
@mahdimolaei3894
2 ай бұрын
Shout out to Nuxt 4 🤩🤩🤩🤩🤩🤩
@TheAlexLichter
2 ай бұрын
📈📈📈
@biLLie_wiLLie
2 ай бұрын
I like file structure in nuxt 3. It seems good for me
@TheAlexLichter
2 ай бұрын
What do you think about the Nuxt 4 changes?
@ElFerBlocks
Ай бұрын
I think , if somebody use object oriented programing with type script , a folder is missing . This folder have to be in app folder and it's name classes (app/classes) . I wonder, does somebody use object oriented programing with nuxt?? . May be I one of this guys
@TheAlexLichter
Ай бұрын
It isn’t super popular and I personally don’t. But luckily you can simply create a services / classes / … folder 👌🏻
@hvsciverius
2 ай бұрын
oh God, It feels like Nuxt 3 just released few months ago
@TheAlexLichter
2 ай бұрын
While it was more than a year 😱
@QueeeeenZ
2 ай бұрын
Hey Alex, thanks for the video. Is it possible to have flat layers structure without having the extra "layers" directory like this for a cleaner look? I would like to put my layers directly inside /app directory without an extra "layers" directory. /app/ - users/ - settings/ - sales/ - auth/
@TheAlexLichter
2 ай бұрын
Should be possible but then you have to manually extend them in the config 👌🏻
@QueeeeenZ
2 ай бұрын
@@TheAlexLichter Could you show how? also, it would be nice if each layer could bundle its own server routes like "users" layer should include api routes for "users"
@TheAlexLichter
2 ай бұрын
@QueeeeenZ layers can have their own server folder. Extending works like shown in the layers guide (link in description) via “extends” option
@Aguycalledmax
2 ай бұрын
If our nuxt apps do not use nitro server and instead use an external api, does this new folder structure provide any benefit?
@TheAlexLichter
2 ай бұрын
Yea! It still can if you decide to use a BFF (Backend For Frontend). And perf-wise (during dev) you still don’t need to scan node modules, .git and all 👌🏻
@yohannb5910
2 ай бұрын
C an we auto import at the root level to share functionalities like validation schema for example ? in Nuxt auto imports are handled separately for Nuxt and Nitro, Nitro auto imports do not work out of the server folder
@TheAlexLichter
2 ай бұрын
You might want to do as in kzitem.info/news/bejne/kZWewK2jpqKGe4Y
@yohannb5910
2 ай бұрын
@@TheAlexLichter actually to auto import at rootDir, Nitro needs to have root path referenced as 'shared/**' (without slash or .. to start) while Nuxt auto imports need to be relative to the srcDir folder (app folder in Nuxt 4) '../shared/**'. to import recursively, just add /**/**/** as deep as your folder hierarchy.
@erxweo
2 ай бұрын
Have you considered FSD in any way?
@TheAlexLichter
2 ай бұрын
Yes! That’s what I’ve shown with /layers! See also kzitem.info/news/bejne/x6hr36NpmoicmXY
@erxweo
2 ай бұрын
@@TheAlexLichter thank you very much
@skyhappy
Ай бұрын
why use nuxt over sveltekit?
@TheAlexLichter
Ай бұрын
Some points (all are impossible to list): First: Vue vs. Svelte (preference here) Second: Ease of deploying everywhere with Nuxt Third: Nuxt Layers (very unique feature) Fourth: Community
@skyhappy
Ай бұрын
@@TheAlexLichter how is nuxt easier to deploy exactly?
@TheAlexLichter
Ай бұрын
Thanks to Nitro, you can deploy to 20+ platforms, a lot with 0 config, no matter if edge runtime, node, deno, etc. without much effort. As in nitro.unjs.io/deploy
@---dp5vj
2 ай бұрын
I generally prefer flatter folder structures and organizing by file name.
@TheAlexLichter
2 ай бұрын
That’s fine 👌🏻 you can still do so ☺️
@---dp5vj
Ай бұрын
@@TheAlexLichter This makes perfect sense now. Combined with layers, workspaces, and multi-app functionality in the future, this helps to organize things nicely. Thanks for the video.
@user-xu3lj1ej8d
12 күн бұрын
You look like hans niemen, The American chess grandmaster
@TheAlexLichter
12 күн бұрын
But there is way less controversy around me 😛
@user-xu3lj1ej8d
12 күн бұрын
@@TheAlexLichter I like your sense of humor xD
@TheAlexLichter
12 күн бұрын
Thanks 🙏🏻🙊
@edgeuplink
Ай бұрын
what about .env ?
@TheAlexLichter
Ай бұрын
Stays top-level (like the nuxt config) 👌
@yoskokleng3658
2 ай бұрын
i check their document, it is still nuxt version 3.12.2
@TheAlexLichter
2 ай бұрын
And you can opt into the changes already! Link in the description
@randomtimessomehow
2 ай бұрын
I think these changes are so unnecessary and this is why I almost never update any of my modules. Sure, updates come with useful stuff but there are also lots of things that just cause headaches. We should not forget that our goal as developers is to develop a product that solves a problem/has purpose and not move folders/files around to be compatible with new versions etc. (just my opinion....)
@TheAlexLichter
2 ай бұрын
But do you see merit and *why* the Nuxt team introduced the changes? And if you really don’t agree, you can always opt out of the new structure (or not opt into it as shown at first)
@TheAlexLichter
2 ай бұрын
Plus, to be fair. Adding one folder and move most of the others inside will take ~5min to migrate, so it isn’t a big effort 👀
@Andrey-il8rh
2 ай бұрын
I wonder how layers order is recognized when no extra config is provided?
@TheAlexLichter
2 ай бұрын
Through the layers folder (only). One subfolder in there = 1 layer. So layers/a, layers/b, layers/whatever etc etc
@Andrey-il8rh
2 ай бұрын
@@TheAlexLichter I see...so it should be nested to override? Like layers/a/b/c ?
@TheAlexLichter
2 ай бұрын
No no. These layers (A, B, whatever) are „siblings“ on the same level but „children“ of your app. So you can override them only in your actual app with components etc. If you want a base layer that a, b and whatever inherit from, the layers folder might not work for that out of the box (so you need to use extends as shown in my layers guide)
@Andrey-il8rh
2 ай бұрын
@@TheAlexLichter but my question was about how those layers interact with each other. If I have 3 layers, a, b, c. How will I know which order they will be arranged?
@TheAlexLichter
2 ай бұрын
They shouldn’t be order dependent! Otherwise you have a dependency (eg a needs b) and layers folder might not be ideal for that
@hanes2
2 ай бұрын
Anyone know the official release date/month of Nuxt 4?
@TheAlexLichter
2 ай бұрын
As Daniel said 👀 In kzitem.info/news/bejne/t7CjqY6wsWJ2n3Y
@chingizmammadov6270
2 ай бұрын
Hi Alexander, did you provide paid consultation for engineers?
@TheAlexLichter
2 ай бұрын
I do! Feel free to schedule a meeting @ www.lichter.io/
@xMorthi
2 ай бұрын
check his website. you can book there
@chingizmammadov6270
2 ай бұрын
Thanks guys. Already booked :)
@alimaher1
2 ай бұрын
I'm not really sure about this to be honest. My initial feeling is that it adds more complexity to the project. I understand the whys from the performance pov but other than that I don't see it. Maybe I'd like it once I work with it idk.
@TheAlexLichter
2 ай бұрын
Definitely give it a shot! IMO the separation between server and client *really* helps to know the “boundaries” between the nitro-related part and Nuxt
@Wojtasvx
2 ай бұрын
Right! :D
@TheAlexLichter
2 ай бұрын
Haha 😛
@Anonymous-jd3zc
2 ай бұрын
it's slowly turning into Laravel 😆
@TheAlexLichter
2 ай бұрын
Which is a good thing, right? 👀
@Anonymous-jd3zc
2 ай бұрын
Yes, yes it is 😁 @@TheAlexLichter
@user-up5qf6cm6w
2 ай бұрын
Srry but nuxt3 is still better and sexier..
@TheAlexLichter
2 ай бұрын
In terms of what? 👀
@hasanaliyev5231
2 ай бұрын
Copying another NextJS feature? Nice. What about doing something unique and your own? Do you realise that you are years behind of NextJS, although I don't like neither of NextJS and NuxtJS.
@TheAlexLichter
2 ай бұрын
1) Which NextJS features was copied here? Just because the folder name is also app, it doesn’t meant Nuxt has an app router now (hint: it doesn’t) 2) I doubt that Nuxt is years behind NextJS 😁 but I might be biased here. Curious to here from you in what Nuxt is that behind! 3) which framework do you like then? 👀
@augustusezenwankwo
2 ай бұрын
Layouts and middleware first came to nuxtjs. If anything, they copy each other, lol.
@forktrader7870
2 ай бұрын
i dont like it. its like NextJs but running the vue for templating. fk
@TheAlexLichter
2 ай бұрын
Not really. Nuxt has no App router like next. It is simply a separation (which you could’ve done mostly that way in Nuxt 3) Please don’t overdramatize it 😁
@muzzi1984
2 ай бұрын
Ok but Nextjs running the React, as well. :)
@freekeys
2 ай бұрын
Nuxt 4 please provide cross platform tech at top level so we don't use react native 🥲😂
@TheAlexLichter
2 ай бұрын
I *wish* it'd be that easy. But funnily, this will be covered in a soon-to-be-released podcast episode on www.youtube.com/@DejaVueFM with a *very* special guest.
Пікірлер: 121