Wonderful improvements! DefineModel and especially generic components are such good additions to the framework! Was watching the generics rfc being worked quite some time now, good to have it now.
Reusable types became a huge problem for me. Even though there was a solution, it came at its own cost. I'm glad that there is now a native fix for this
@@LearnVue I hope that there will be an option to create subcomponents (or component fragments) like: all in the same file. So later you can compose cards using these subcomponents instead of parametrizing it or using slots of different kind. Lack of this feature adds complexity, cause this structure NEEDS to be defined somewhere and the only place is folder structure, which makes things a little harder to maintain. I feel like "setup" part is now pretty complete. What I also miss is "functional" directive and consistency between sfc and functional components. I wasn't using it in Vue 2, but was kind of neat.
Huge update. All of these features are so useful! I wonder if you could cover more complex stuff like f.e. development methodology with Nuxt 3, Histoire, various tools to have visual regression testing, component testing, unit testing and automating all of them to create streamlined development process. What I always criticize about Vue is its ecosystem. Vue by itself is awesome, but there's lack of tools to pair it with it. There's so many underdeveloped packages that make development harder. Cypress for example is not yet released for Nuxt 3, same with i18n (package is still in development and this is one especially is so important!!!) There's no unstyled component library like Radix primitives for React. There's Headless UI with basic components, but comparing it with Radix, we can clearly see it's not enough. Please. Let's think about it together if you wish. It's of much importance for anyone doing apps ready for production.
i agree with you. some context from my side: those videos just don't do as well. i'm working on some longer form content to post on my website (pay-what-you-want model) so i can keep the youtube for more fun/catchy topics and still have some of those deep dives into realistic use cases. also - learnvue community UI library???
Really excited to see generics support finally land. I've been using it with the experimental flag for a while now. Hopefully this also means I can remove the linting exceptions for T.
@@LearnVue A list component that lets you pass in a bunch of items and lets you add, sort and edit them in place. I use slots to let you define what goes in the "viewing" and "editing" states for each item. Having generic types means I can bind the item to the slot and it will know the type when you destructure it with v-slot.
as an experienced react developer wanting to try out vue, this channel's videos is just right with the pacing of the content to make me understand vue not as a total beginner to the javascript framework ecosystem :)
I'am using Nuxt 3.5 that has Vue 3.3, but i can't import external types 😥 getting error [@vue/compiler-sfc] No fs option provided to `compileScript` in non-Node environment. File system access is required for resolving imported types.
I didn't understand the advantage of this record of props -> const {msg = "something", mane= "sdfdsf"} =defineProps () . I just use this record and it works well : defineProps({} msg: String, default: ''something' ) Ang the props variables also available in templates. And i need to accses to props in setup section I just use const props = defineProps({....})
after updating from vue2 to vue3 a few months ago with > 100 components now the biggest thing on my mind with every vue update is how much it will break. Finger crossed...
Could be just me but after updating to 3.3.1 (confirmed by Vue devtools) by destructuring the input props and setting default values, they still don't have values... SelectInput {{ msg }} {{ type }} import type { SelectInputProps } from '../../Support/Types/Inputs/SelectInputProps' const {type = 'select', options = [], msg = 'test'} = defineProps() console.log('Type: ', type) console.log('Msg: ', msg) Both "msg" and "type" have no values in the template and the console logs throws reference errors...
there's some configuration options you need to set (check the blog post/source code)...i made this video before that part was made official so sorry for not adding it!
@@LearnVue a complete CRUD component. The props are a list of mutations inputs, a list of filters inputs, the list of items returned from the API and the list of headers. The headers have a tranform function that format the items to show them corretly inside the CRUD's list. Generic components gonna help me with the general typing of this component. Currently i'm using 'unknown' and type casting to use it.
Performance: Vue is compiled, but some other frameworks even tho released before Vue don't have a even a basic compiler Official libraries: You don't have to learn a new state management solution every 6 months, Or new stacks when you change teams.
dank mono haha. i saw it on daniel roe's stream and yoinked it - philpl.gumroad.com/l/dank-mono#:~:text=A%20typeface%20designed%20for%20coding,diacritics%20covering%20most%20European%20languages. sorry not sorry 🥴
@@LearnVue Had no time to learn it, single developer project (all interfaces in my head), and now too late. Would not recommend it for a larger project, though.
@@jonnysongs Yes, it’s a crappy framework that made me suffer since 2017 as I was forced to use it. It just recently became somewhat tolerable by copying react (typescript support, generics, hooks). In a perfect world, vue wouldn’t exist. Everything good about it is a copy of react and everything they added just makes it unnecessarily hard to work with it (like, inventing a new proprietary file type and not supporting it properly)
@@FlorianWendelborn Fair enough, thanks for the response. I have never used React so can't comment in a technical way, but will only say that Vue 2 was nice because it gave someone like me, a noob in frontend techs, an easy way to make a web application. I look forward to trying Vue 3 once Vuetify is ready.
@@LearnVue I meant, if these changes are only in using Typescript or similarities can be applied in JavaScript as well. Or any other updates on Vue 3.3 using JavaScript, works too. Thank you.
@@unknownguywholovespizza With how popular and integrated react is right now, there are better prospects for developers to use react, Vue lost the race from V3, we bet on the wrong horse, i wouldnt double down on 3.3, just switch to svelte or react
@@oogabooga2581 I mean why do we have all these frameworks? It just makes me depressed because of all these tools that pop up everyday in frontend. It's just too much unnecessary sea of endless frameworks
@0:45 Vue Composition API is so ugly, geez 😞 That is so simple to achieve in Options API, I can't find any reason to go Composition, other than Vue trying to appeal to React and TS meatheads. Happy at least 3.3 now has made it more readable @0:50
vue is just doing all the right things. It's becoome so much enjoyable to use since version 3 forwards.
i really like it. and the stuff the nuxt team is working on is beautiful too
It’s become more enjoyable because they finally got closer to React, lol (hooks, typescript support, generics)
Do you know what font he uses. It's gorgeous
@@FlorianWendelborn yeah but in their own way, although you can still use jsx with vue
Wonderful improvements! DefineModel and especially generic components are such good additions to the framework!
Was watching the generics rfc being worked quite some time now, good to have it now.
yeah generics should unlock some really nice tooling
Awesome content as always!
Quick question: how do you make your code have a transition animation between states in your video?
shamelessly stole this technique from th-cam.com/video/Vh3y1ela-_s/w-d-xo.html
for mac, it's the "magic move" transition in keynote!
And now finally Vue achieves the "3.0" *stable version*
Reusable types became a huge problem for me. Even though there was a solution, it came at its own cost. I'm glad that there is now a native fix for this
defineModel 😍
i wonder what other vue macros will make it into core
@@LearnVue I hope that there will be an option to create subcomponents (or component fragments) like: all in the same file. So later you can compose cards using these subcomponents instead of parametrizing it or using slots of different kind. Lack of this feature adds complexity, cause this structure NEEDS to be defined somewhere and the only place is folder structure, which makes things a little harder to maintain.
I feel like "setup" part is now pretty complete. What I also miss is "functional" directive and consistency between sfc and functional components. I wasn't using it in Vue 2, but was kind of neat.
@@wojciechosinski5927 vueuse.org/core/createReusableTemplate/ something like this or something different?
Huge update. All of these features are so useful! I wonder if you could cover more complex stuff like f.e. development methodology with Nuxt 3, Histoire, various tools to have visual regression testing, component testing, unit testing and automating all of them to create streamlined development process. What I always criticize about Vue is its ecosystem. Vue by itself is awesome, but there's lack of tools to pair it with it. There's so many underdeveloped packages that make development harder. Cypress for example is not yet released for Nuxt 3, same with i18n (package is still in development and this is one especially is so important!!!) There's no unstyled component library like Radix primitives for React. There's Headless UI with basic components, but comparing it with Radix, we can clearly see it's not enough. Please. Let's think about it together if you wish. It's of much importance for anyone doing apps ready for production.
i agree with you. some context from my side: those videos just don't do as well. i'm working on some longer form content to post on my website (pay-what-you-want model) so i can keep the youtube for more fun/catchy topics and still have some of those deep dives into realistic use cases.
also - learnvue community UI library???
@@LearnVue Heck yeah! I just started creating one myself :>
For assigning default values:
const props = defineProps({state: {type: Boolean, default: false}})
but i like the type-based syntax 🙈
Really excited to see generics support finally land. I've been using it with the experimental flag for a while now. Hopefully this also means I can remove the linting exceptions for T.
what have you been building with it?
@@LearnVue A list component that lets you pass in a bunch of items and lets you add, sort and edit them in place. I use slots to let you define what goes in the "viewing" and "editing" states for each item. Having generic types means I can bind the item to the slot and it will know the type when you destructure it with v-slot.
They also said that Suspense will come in 3.4 in a stable version 🔥
as an experienced react developer wanting to try out vue, this channel's videos is just right with the pacing of the content to make me understand vue not as a total beginner to the javascript framework ecosystem :)
Excited to see this in Nuxt
Bro this is just what I needed for my library!
glad to hear it, what are ya building?
@@LearnVue Just component lib for my projects. Being able to share props as types really makes composables powerfull
It solves so many issues I encountered lately
The font used in the vs code example is really cool. How do I set that up? It's very clean looking..
So amazing news! Thanks for a nice wrap up.
thanks for watching
what font do you use in vscode,setup and lang is very beautiful
Let's go! Thanks for the review of new features
hope you have fun trying them out 😅
Thanks for the vid!
What extension do you use to replace the icon name in the import path with the actual icon? Or maybe that’s a real file name…
another beautiful antfu project github.com/antfu/vscode-iconify
there is a drawback when you destructure the props. it won't get latest value when the props value changes
Hey, what's the theme, font and design that you use for VSCode? Looks neat
dank mono + dracula pro
External types and generic components!
i love your vids so much... but could i please know the name of the fonts you use?
What is the best Design system for vue 3?
Oh LAWD I've been wanting genetics in vue! Thank you!!
what are you planning on building with them?
@@LearnVue well... lists, like in your video haha! like dropdowns, etc.
Great video, awesome new features.
i know right - which is your favorite
So hyped for this!! :)
Can you have multiple generics?
yup! just had a comma in the generics attribute and add more!
Wow very nice XD
Generic types will be very useful in components like data-tables
And defineModel will save a lot of repetive code
yeah im excited to see what UI libraries can do with generics
I will update to vue 3.3 right now just for the generic types in slots.
it’s so nice
The generic typed class works! but I'm getting this error when building "error TS2304: Cannot find name 'T'." What should I update?
What font is this. It's incredibly gorgeous.
Plus thanks for the amazing content. You're one of the best Vue channels I love watching
dank mono!
@@LearnVue thanks a lot 💪🏽
Great content! thank you :) . You really need a pop filter for your mic though
i knoww lol 😅
Hm, so strange. I don't have autocomplete in generic components. Any ideas why?
I'am using Nuxt 3.5 that has Vue 3.3, but i can't import external types 😥
getting error
[@vue/compiler-sfc] No fs option provided to `compileScript` in non-Node environment. File system access is required for resolving imported types.
I didn't understand the advantage of this record of props -> const {msg = "something", mane= "sdfdsf"} =defineProps () . I just use this record and it works well :
defineProps({}
msg: String,
default: ''something'
)
Ang the props variables also available in templates. And i need to accses to props in setup section I just use const props = defineProps({....})
Imported types is game changer
i know right. super helpful
Half of that updates are what react already had in 2019 or even earlier
after updating from vue2 to vue3 a few months ago with > 100 components now the biggest thing on my mind with every vue update is how much it will break. Finger crossed...
vue's new plan is to have more frequent minor releases so hopefully that makes migration a lot easier
Vue is so underrated i swear
Thank you !
Could be just me but after updating to 3.3.1 (confirmed by Vue devtools) by destructuring the input props and setting default values, they still don't have values...
SelectInput
{{ msg }}
{{ type }}
import type { SelectInputProps } from '../../Support/Types/Inputs/SelectInputProps'
const {type = 'select', options = [], msg = 'test'} = defineProps()
console.log('Type: ', type)
console.log('Msg: ', msg)
Both "msg" and "type" have no values in the template and the console logs throws reference errors...
there's some configuration options you need to set (check the blog post/source code)...i made this video before that part was made official so sorry for not adding it!
@@LearnVue Indeed it requires a configuration in "vite.config.js":
vue({
script: {
defineModel: true,
propsDestructure: true,
}
}),
OMFG GENERIC COMPONENTS FINALLY GENERIC COMPONENTS
what are you building with them?
@@LearnVue a complete CRUD component.
The props are a list of mutations inputs, a list of filters inputs, the list of items returned from the API and the list of headers.
The headers have a tranform function that format the items to show them corretly inside the CRUD's list.
Generic components gonna help me with the general typing of this component. Currently i'm using 'unknown' and type casting to use it.
Can someone give me a quick overview why they prefer Vue over other frameworks? I'm not a Vue developer but I am very curious!
IMO people scared about JSX but somehow not scared about weird proprietary vue templates
Performance: Vue is compiled, but some other frameworks even tho released before Vue don't have a even a basic compiler
Official libraries: You don't have to learn a new state management solution every 6 months, Or new stacks when you change teams.
What the heck kind of font are you using that only SOME letters are cursive...
dank mono haha. i saw it on daniel roe's stream and yoinked it - philpl.gumroad.com/l/dank-mono#:~:text=A%20typeface%20designed%20for%20coding,diacritics%20covering%20most%20European%20languages.
sorry not sorry 🥴
Awesome!
whats ur favorite feature
Define model will save some much boilerplate
I am still using vanilla Javascript with Vue3, so this update is not that exciting for me :)
ah dang. any particular reason to not use typescript? im curious
@@LearnVue Had no time to learn it, single developer project (all interfaces in my head), and now too late. Would not recommend it for a larger project, though.
But GPT-4s knowledge cutoff is Sep 2021
Yeah ok that's why I always get f up with its useless answers
zoom more. You're doing a great job for people like me that can't have enough time to keep up with every update of every technology.
that's the goal, i try to make the quick videos that i wish existed!
Vue listens to community
couldnt agree more. i love how Vue can take inspiration from every framework
But.. and forgive my newb question, what if you don't want the props to be refs?
not a noob question. you don't have to destructure the defineProps and it works the same.
Endless learning again...
Generics ❤❤❤
Font please?
👍👍👍👍👍
Yo🎉
yo
Finally they support generics. Only like 4 years late
All you've done is crap on Vue and be snarky in all your comments on this vid. Any reason for this?
@@jonnysongs Yes, it’s a crappy framework that made me suffer since 2017 as I was forced to use it. It just recently became somewhat tolerable by copying react (typescript support, generics, hooks). In a perfect world, vue wouldn’t exist. Everything good about it is a copy of react and everything they added just makes it unnecessarily hard to work with it (like, inventing a new proprietary file type and not supporting it properly)
@@FlorianWendelborn Fair enough, thanks for the response.
I have never used React so can't comment in a technical way, but will only say that Vue 2 was nice because it gave someone like me, a noob in frontend techs, an easy way to make a web application. I look forward to trying Vue 3 once Vuetify is ready.
I think you might want to consider those ones, who has no idea about TypeScript as well, and using only JavaScript.
good point - what would you like to see? javascript content? or more basics about using Typescript.
can't recommend using typescript enough though
@@LearnVue I meant, if these changes are only in using Typescript or similarities can be applied in JavaScript as well. Or any other updates on Vue 3.3 using JavaScript, works too. Thank you.
Thank you for your video!
th-cam.com/video/Z-qLPtWFZps/w-d-xo.html
Why didn't "hello" show in the Input field? The one you passed to ref('hello')
tbh that's an editing mistake by me - good catch :)
I can't understand anything,
}>()
Who thought this looks good?
Ah yes frontend... The world that causes decision fatigue because of its many "helpful" frameworks
ah i should have just stuck with react 💀
No you should have stuck with backend or anything else other than frontend
@@unknownguywholovespizza With how popular and integrated react is right now, there are better prospects for developers to use react, Vue lost the race from V3, we bet on the wrong horse, i wouldnt double down on 3.3, just switch to svelte or react
@@oogabooga2581 I mean why do we have all these frameworks? It just makes me depressed because of all these tools that pop up everyday in frontend. It's just too much unnecessary sea of endless frameworks
Frameworks 🤮
what a mess
lol
The only meaningful comment here. Vue is a mess! (had 5 y experience with it and happy to leave it in the past).
@0:45 Vue Composition API is so ugly, geez 😞
That is so simple to achieve in Options API, I can't find any reason to go Composition, other than Vue trying to appeal to React and TS meatheads.
Happy at least 3.3 now has made it more readable @0:50
im a TS meathead i guess :(
Vue has the worst syntax ever. Uglier then Angular... Both use non natural way to code in javascript. React/Next/Solid for life!
Ugh...go away troll.
Vue is the best frontend framework in my opinion so far. what you mentioned is just bullshit.
👍