Be careful with the composition store. Having reactive values outside of the setup script lifecycle can lead to nightmarish memory leaks both in the browser and in the server (if you're working in an SSR environment). I strongly advise against it. Nuxt 3 useState approach (keyed reactive refs) is by far the safest and more correct approach.
Hey Thanks Matteo! I have not heard of that, but that makes sense. Perhaps using something like effect Scope, could be used to mitigate that problem... v3.vuejs.org/api/effect-scope.html#effectscope
@@ProgramWithErik it sure does. When you define refs/reactive values outside of setup they provide a function to have their effects disposed and garbage collected. If you don't dispose them correctly memory keeps going up every time you reload a page. I'll create a reproduction repository if you want, I have had this problem twice with two projects before understanding what was wrong 😅
And that's why StackOverflow doesn't allow (receive a lot of downvotes) when a comment like this appear. It creates a doubt on people minds, doesn't provide any proof of concept, put a lot of "facts" and just leave. When you do certain assumptions and advice people with phrases that contain a "don't do that" label is you obligation to show a least a POC showing the scenario, otherwise is just bollocks.
Slots are cool and all, but beyond one or two levels deep they become cumbersome. So to me the store pattern is the way to go here. jsx?? I don't think so... it's what turned me off of react and onto Vue in the first place, so not about to go down that route again. Informative tutorial, thank you.
nice! more tsx in vue? it’s a little more experimental & not as seamless as jsx in react, naturally, but vue with tsx fascinates me. there’s a couple good resources on how to work with the 2 but there’s really not a lot of content out there on it.
Would you create a video about how to render a component from async content? For example...think Wordpress style short-code. Loading a vue component from HTML that is loaded from an API call. I've always wonder if there was a way to do that. I assume using the render function would be needed.
Global modals work great with the store pattern using an object that holds all state I want. I do it all the time and it’s infinitely customizable on the fly without limitation.
It looks cool at the beginning, but you kind of open the Pandora box with the issues, I speak about experiences. Issues when you want to use events, issues when you want to use Jest, etc, ....
@@ProgramWithErik JSX is problematic (maybe it's because I still use Vue2, as Vuetify is not ready yet), slots are native to Vue, so there is not issues with them.
Love Vue, would just like to have it render SEO friendly manner. Especially since SSR is not always an option. This I have seen done as an intercept, on routing where the SEO specific meta structure is sent when a the Google crawler bot is identified. Any ideas on something like this, as a bullet proof solution would be awesome since VueMeta is no longer applicable since the version Vue3 release.
Interesting. Well first, I really like SSG so there is Vue 3 plugins for SSG like github.com/antfu/vite-ssg. As for adding meta tags vue meta is in alpha for Vue 3. Also, I think Google crawlers work fine for SPA type apps now a days. I stilll prefer SSG for the speed though on blogs and contente heavy SEO sites.
@@ProgramWithErik Thanks for the kind reply, I will go and have a look as I am keen to find a way for static content generation (on public blog side of the app), while not touching anything behind the authenticated part of the app. My results with Vue even using Portals as per what VueMeta dev team was discussing with their upgrade for Vue3 support - was that the crawling is terrible when previewing Google bot’s scraping results. They do have a wait to load method for SPAs, but most other crawlers do not or are extremely lacking. So this is quite an interesting one as an SSR approach would best although as mentioned not always possible.
Sad😕 1. I don't want make props drilling, but I did slot drilling 2. Not reactive as expected, and needs yous additional code 3. Most people need time to understand this pattern, also for experience programmers. In my opinion, this pattern almost never will be using in real projects
I try to store all variables and methods in the root .vue file... unless they are component specific. like Table has sorting methods, im not gonna use that anywhere else. But getting data from API is at the top, because its provided everywhere and deep...
I feel like they are the lowest level of components, like buttons, text inputs, forms. Things like those I consider primitives. They may or may not have logic
In one of the video, he showed why having folder structure on the right side is better for the eyes, when you hide that, the code stays at the same place.
![KAYTRANADA - Witchy (feat. Childish Gambino) [Official Video]](http://i.ytimg.com/vi/jGK3YVmGZ3Y/mqdefault.jpg)
Congratulations on the 100k, Erik!
Great video. Would love to see some similar advanced Vue content in the future!
Thanks! Will do!
Be careful with the composition store. Having reactive values outside of the setup script lifecycle can lead to nightmarish memory leaks both in the browser and in the server (if you're working in an SSR environment). I strongly advise against it. Nuxt 3 useState approach (keyed reactive refs) is by far the safest and more correct approach.
That's an interesting topic! Do you, by chance, have a resource where I can read more about that?
Hey Thanks Matteo! I have not heard of that, but that makes sense. Perhaps using something like effect Scope, could be used to mitigate that problem... v3.vuejs.org/api/effect-scope.html#effectscope
@@ProgramWithErik it sure does. When you define refs/reactive values outside of setup they provide a function to have their effects disposed and garbage collected. If you don't dispose them correctly memory keeps going up every time you reload a page. I'll create a reproduction repository if you want, I have had this problem twice with two projects before understanding what was wrong 😅
@@Remeroska Do you know another solution besides using Nuxt 3?
And that's why StackOverflow doesn't allow (receive a lot of downvotes) when a comment like this appear. It creates a doubt on people minds, doesn't provide any proof of concept, put a lot of "facts" and just leave. When you do certain assumptions and advice people with phrases that contain a "don't do that" label is you obligation to show a least a POC showing the scenario, otherwise is just bollocks.
Slots are cool and all, but beyond one or two levels deep they become cumbersome. So to me the store pattern is the way to go here. jsx?? I don't think so... it's what turned me off of react and onto Vue in the first place, so not about to go down that route again. Informative tutorial, thank you.
Glad it helped~! Yeah, JSX isn't for everyone.
Congrats on reaching 100k developers! You're my #1 go-to Vue channel!
Thanks!
You could use
Interesting! I did not know that. I'll try that next time.
So it' s basically inline jsx?
nice! more tsx in vue? it’s a little more experimental & not as seamless as jsx in react, naturally, but vue with tsx fascinates me. there’s a couple good resources on how to work with the 2 but there’s really not a lot of content out there on it.
Definitely want a JSX vid
Please!
Would you create a video about how to render a component from async content? For example...think Wordpress style short-code. Loading a vue component from HTML that is loaded from an API call. I've always wonder if there was a way to do that. I assume using the render function would be needed.
Interesting, might be a fun topic to look at! Thanks I don't think I've ever done that. But I'm sure it could be done...
Global modals work great with the store pattern using an object that holds all state I want. I do it all the time and it’s infinitely customizable on the fly without limitation.
It looks cool at the beginning, but you kind of open the Pandora box with the issues, I speak about experiences. Issues when you want to use events, issues when you want to use Jest, etc, ....
That's a good point? Are you talking specifically about using JSX, or slots?
@@ProgramWithErik JSX is problematic (maybe it's because I still use Vue2, as Vuetify is not ready yet), slots are native to Vue, so there is not issues with them.
Thanks Erik, great tutorial! I just started to learn Vue and in the future I might use this.
Glad it was helpful!
I think it will be a great feature for updating Hybrid apps live, without pushing a real app update into the store.
Thank you Erik, amazing video
My pleasure!
Never had to import mounted (onMounted) before… with Vue3 we write more code and it’s less readable.
The composition store way is magnific! I'll start to use it in my projects when necessary.
Nice!
Off topic question... what theme are you using in VS Code?
Quasar ❤️
That's a good one
You are becoming my best friend! :)
At 6:24 why don’t you just export the store variable. Why do you need a function to call to retrieve the variable.
Hi, I couldn't find any complete or good resource for jwt auth in vue. Can you make one with production ready. 😀
100k congrats
Thank you so much 😀
Love Vue, would just like to have it render SEO friendly manner. Especially since SSR is not always an option. This I have seen done as an intercept, on routing where the SEO specific meta structure is sent when a the Google crawler bot is identified. Any ideas on something like this, as a bullet proof solution would be awesome since VueMeta is no longer applicable since the version Vue3 release.
Interesting. Well first, I really like SSG so there is Vue 3 plugins for SSG like github.com/antfu/vite-ssg. As for adding meta tags vue meta is in alpha for Vue 3. Also, I think Google crawlers work fine for SPA type apps now a days. I stilll prefer SSG for the speed though on blogs and contente heavy SEO sites.
@@ProgramWithErik Thanks for the kind reply, I will go and have a look as I am keen to find a way for static content generation (on public blog side of the app), while not touching anything behind the authenticated part of the app. My results with Vue even using Portals as per what VueMeta dev team was discussing with their upgrade for Vue3 support - was that the crawling is terrible when previewing Google bot’s scraping results. They do have a wait to load method for SPAs, but most other crawlers do not or are extremely lacking. So this is quite an interesting one as an SSR approach would best although as mentioned not always possible.
Sad😕
1. I don't want make props drilling, but I did slot drilling
2. Not reactive as expected, and needs yous additional code
3. Most people need time to understand this pattern, also for experience programmers. In my opinion, this pattern almost never will be using in real projects
What pattern do you like?
@@ProgramWithErik Obvious and others develops can understand. Like in official documentation
I try to store all variables and methods in the root .vue file... unless they are component specific.
like Table has sorting methods, im not gonna use that anywhere else.
But getting data from API is at the top, because its provided everywhere and deep...
Primitive components = components which hasn'y any logic, like sections, text containers etc.?
I feel like they are the lowest level of components, like buttons, text inputs, forms. Things like those I consider primitives. They may or may not have logic
@@ProgramWithErik Ok, thanks :)
I guess you could pass a component as a prop or in store and just use it in shadow box
Hi Erik,
Can we use vue ( not vue client side ) inside already working .net core view page? is it possible? like vue packages?
There was a conference talk at last years Vue Conference where someone was using the 'reactive' Vue on the server side. You could look into that
9:18 onMonted is not the solution. Its because the child reasign the shadowText.
The onMounted gives a minute for the child to load before we change the text.... There was probably a few ways to handle it
@@ProgramWithErik yes.but it was mounted with the bad value first and was reprocess/paint after. In SSR you will have the bad text in SEO.
@@ProgramWithErik btw, you are one of my favorite youtuber!
buen video crack :b
It is very annoying to look at your folder structure in the right side
In one of the video, he showed why having folder structure on the right side is better for the eyes, when you hide that, the code stays at the same place.
Yeah, as @Priyank said, I put it on the right side because it's less movement when I close it of the code. I stole that from Jason at Netlify
Is it only me that cannot play the video?
First
Good job!
hmm, v-html?