A few people have asked me recently about help on their Vuetify, Vue, Front End projects! If you didn't see I do offer 1-on-1 mentoring, where I can help! Check out my link here. mentorcruise.com/mentor/erikhanchett/?preselect=lite
Imo people should use Quasar instead. They have material design and they have been on vue 3 for over a year. Very fast moving, stable, and robust solution for people wanting to make material design web, mobile, or desktop apps.
Couldn't agree more. And Quasar is so much more! It even makes developing browser extensions a breeze! No matter what I'm doing, a serious project or a quick prototype, I'll either use Quasar or end up regretting not using Quasar. 😄 And supporting Vue3 just now is a bit of an embarrassment, if you ask me.
@@dragon3602010 Wow, my whole long winded answer just got auto-deleted because I linked to a different channel. Guess I just try this again. -.- Yes, it's a lot easier to build extensions using Quasar, because the communication between the isolated "worlds" is easier to work with, thanks to Quasar's unified API they call the bridge.
In theory you can build a SPA and with a single command on the command line you can turn it into a browser extension, a mobile or desktop app or a SSR page, etc. Or all of the above! The icon generator app (icon genie) that comes with Quasar is already amazing and I use it all the time.
This is so funny, I was up last night watching a bunch of your videos because I’m starting in a new project with Vue 3 and Nuxt is the way we wanna go with SSR, and I spend this morning doing exactly this, great video 🎉
@ProgramWithErik Great tutorial, I've a question , how can I add routing to the sidebar menus? If I use nuxt I can do it easily with NuxtLink but how to do it here?
Vuetify Nuxt3: made it to end. I liked this video and got the Nuxt3/Vuetify3 setup running no problem. Background: I built an analytics and data collection web app using Vue 2, Express, Axios, MariaDB and Vuetify2 a year or so ago, and then built a data collection appliance prototype based on ESP32 that pushes collected data to the web app running on Digital Ocean. I am now porting my web app to Vue3/Vuetify3/Nuxt3. As I do this major refactor, I will need to support mobile as well and hopefully this combination will work well for that. So I would request a followon video on adding mobile support. Also, I use the popular ChartJS so if you could include ChartJS that would be a splendid and undoubtedly popular video! Thanks Erik.
I'm a fan of Vuetify 2 but don't feel like Vuetify 3 is ready for use in production, at least it doesn't yet support the components I was expecting to use.
vuetify-nuxt3 seems brilliant, loved the video. keep up the great content Erik. though I love vue, due to job demands, I'm starting to learn react-nextjs. it's a shame really, vue and nuxt does not have that big of a job demand compare to reactjs.
I am in the same boat. I love Vue, but the market for vuejs developers is tiny compared to reactjs. Even Angular developers have more options! This of course is only my perspective living in Toronto. P.S If anyone has found the mythical land of Vue-lantis where Vue developers regularly can make $150k+ like React developers do or bill $80-100/hour like experienced Angular contractors share with us please!
Hey, loving Vuetify. Would be nice to see some videos about how Vuetify works internally, Would like to contribute, but I am not super skilled to understand the code structure.
nice video, I definitely will revisit this. I finished setting up a simple crud backend with nestjs and now I need to setup the frontend with crud etc. Next is login/register.
Thanks Erik, I would like to see how to officially integrate Vuetify 3.0.0 with Vue3 Vite? The documentation of Vuetify doesnt talk anything about Vue3 Vite.....thanks
You navigate in code editor without a mouse is amazing , super fast , accurate and efficient 👍👍, are you just using the arrow key or Vim key bindings etc?
Can't wait to play around with my two favorite addons to Vue: Vuetify and Nuxt. But what about state management? useState or Pinia? Would like to hear your take. Thanks for the great video.
I find there is too much hype around vuetify. I've waited so long on it, that I've found a replacement(PrimeVue) that I'm quite happy with. I think that Vuetify has still this google material designs that is having less and less traction.
@@accutus I started with it but didn't stick to it. I still believe in the fundamental reasoning for doing so... but I just had a lot of code editing to do and kept going back to old habits. 🤷🏼♂
Thanks for this Erik, really useful. Quick update that as of today (January 2023) I also had to install the @mdi/font package as a dev dependency and update the import path in nuxt.config.ts to @mdi/font/css/materialdesignicons.min.css (or @mdi/font/scss/materialdesignicons.scss)
No, it isn't, importing components and directives as shown in the video will import everything, the default installation of vuetify 3 uses vite-plugin-vuetify for treeshaking but I haven't tried yet with nuxt
There's now a third party vuetify modules added to nuxt 3 So we can install it as a modules Thanks for the video tho, it helped me when this was the only way
I think I was expecting the Vue 3 ecosystem to have this stuff a couple years ago when Vue 3 first released. Set myself up for disappointment. Now the Vue ecosystem feels mostly caught up. I might get back into Vue.
Not worth it. I started using vue when it was 0.x version but this vue 3 thing forced me to switch to react and I don't think it's worth going back anymore
@@ludo237 the one thing I like in theory but dislike in practice is react’s take on state management and routing. Because there are no built in or recommended options the developer can really go deep trying to determine how to assemble their project. Granted, I think most have just standardised on Next or some other meta framework but I do appreciate the more curated approach to the ecosystem in practise. However, if I was a happy react dev I doubt I would move ecosystems. At the end of the day they are both JavaScript ecosystems and are capable of much the same things.
@@ludo237I'm working with Vue 2 with ts and vuetify for a couple of years and a new project gives me the opportunity to use Vue 3,nuxt and vuetify 3. And I love it. The react ecosystem is broken these days. I've been there and react is going the same way as angelur.
What about PrimeVue ? I know Vuetify 3 is quite new (and quite nice :) ) but PrimeVue is quite powerful too with a lot of themes. Are you going to show a little bit of it?
I just can't stand the look of the material design. I just feel like the tabs and the form inputs aren't very intuitive for normal users when compared to the bootstrap versions, IMO.
next we wana see vuetify+nuxt3+auth SSR , some middleware use of both server side middleware and client side middleware example and a full blown app with some realtime database. Forexample, code us a realtime blog with comments and image uploads etc.
You would think it would be in the interest of Vuetify to facilitate things for people like myself. Tailwind does a great job with it. This video and the repo didn't work for me. Too many other alternatives to waste time with Vuetify until they change their position on things... Thanks anyway. I do enjoy your videos.
Ngl, I find Material Design to be extremely ugly. Everytime I think about trying Vuetify, I find myself switching back to Tailwind the second I see Vuetify components...
A few people have asked me recently about help on their Vuetify, Vue, Front End projects! If you didn't see I do offer 1-on-1 mentoring, where I can help! Check out my link here. mentorcruise.com/mentor/erikhanchett/?preselect=lite
Also, you can check how nuxt 3 works with vuestic-ui. :))
Hey Erik, could you stop with Material UI and start with Tailwind or other frameworks please?
Imo people should use Quasar instead. They have material design and they have been on vue 3 for over a year. Very fast moving, stable, and robust solution for people wanting to make material design web, mobile, or desktop apps.
Couldn't agree more. And Quasar is so much more! It even makes developing browser extensions a breeze! No matter what I'm doing, a serious project or a quick prototype, I'll either use Quasar or end up regretting not using Quasar. 😄
And supporting Vue3 just now is a bit of an embarrassment, if you ask me.
@@nicolas_reibnitz we can really make chrome extension faster with Quasar?
@@dragon3602010 Wow, my whole long winded answer just got auto-deleted because I linked to a different channel. Guess I just try this again. -.-
Yes, it's a lot easier to build extensions using Quasar, because the communication between the isolated "worlds" is easier to work with, thanks to Quasar's unified API they call the bridge.
In theory you can build a SPA and with a single command on the command line you can turn it into a browser extension, a mobile or desktop app or a SSR page, etc. Or all of the above!
The icon generator app (icon genie) that comes with Quasar is already amazing and I use it all the time.
Don't get me wrong, @ProgramWithErik is great! Luke just really specializes in Quasar stuff.
This is so funny, I was up last night watching a bunch of your videos because I’m starting in a new project with Vue 3 and Nuxt is the way we wanna go with SSR, and I spend this morning doing exactly this, great video 🎉
Awesome!
Vuetify Nuxt 3
Just in the nick of time. I've been meaning to rewrite my Vueify-based site and was also looking at a lot of Nuxt tutorials
Love seeing more Vue videos from you in my notifications! 🥳
thanks for this tutorial! Exactly what I was looking for to help start porting over a legacy codebase to vue3+nuxt+vuetify
Dear Eric: I WAS WAITING FOR THIS ONE SINCE TOO LONG haha
December will be Nuxt 3 month for me.
@ProgramWithErik Great tutorial, I've a question , how can I add routing to the sidebar menus? If I use nuxt I can do it easily with NuxtLink but how to do it here?
Awesome for this tutorial, Waiting on the AWS+(Nuxt3||Vue3)+Vuetify
Coming soon!
Great video!
I would like to see something using markdown for content and multilanguages
Vuetify Nuxt3: made it to end. I liked this video and got the Nuxt3/Vuetify3 setup running no problem. Background: I built an analytics and data collection web app using Vue 2, Express, Axios, MariaDB and Vuetify2 a year or so ago, and then built a data collection appliance prototype based on ESP32 that pushes collected data to the web app running on Digital Ocean. I am now porting my web app to Vue3/Vuetify3/Nuxt3. As I do this major refactor, I will need to support mobile as well and hopefully this combination will work well for that. So I would request a followon video on adding mobile support. Also, I use the popular ChartJS so if you could include ChartJS that would be a splendid and undoubtedly popular video! Thanks Erik.
I'm a fan of Vuetify 2 but don't feel like Vuetify 3 is ready for use in production, at least it doesn't yet support the components I was expecting to use.
vuetify-nuxt3 seems brilliant, loved the video. keep up the great content Erik.
though I love vue, due to job demands, I'm starting to learn react-nextjs.
it's a shame really, vue and nuxt does not have that big of a job demand compare to reactjs.
I am in the same boat. I love Vue, but the market for vuejs developers is tiny compared to reactjs. Even Angular developers have more options! This of course is only my perspective living in Toronto.
P.S If anyone has found the mythical land of Vue-lantis where Vue developers regularly can make $150k+ like React developers do or bill $80-100/hour like experienced Angular contractors share with us please!
Hey, thanks for mentioning my repo 😊
No problem!
Hey, loving Vuetify. Would be nice to see some videos about how Vuetify works internally, Would like to contribute, but I am not super skilled to understand the code structure.
nice video, I definitely will revisit this. I finished setting up a simple crud backend with nestjs and now I need to setup the frontend with crud etc. Next is login/register.
Sounds great!
great vuetify & nuxt 3 video. Now how about element-plus & UnoCSS?
tank you erik i am a huge fan of you i see all videos you have been create for vue js
when i'm using vuetify 3 in nuxt 3 it creates a default scrollbar even when it is not necessary. how can i change it to auto?
Any significant advantages of this combo over Quasar?
Is treeshaking much less pain with Vuetify 3? It'd be awesome to rely on the beautiful JS bits and then add in Tailwind CSS for good measure.
Thanks for this video. Can one use vuetify 3 on production now.
Thanks Erik, I would like to see how to officially integrate Vuetify 3.0.0 with Vue3 Vite? The documentation of Vuetify doesnt talk anything about Vue3 Vite.....thanks
can you please make a video about vuetify treeshaking no one talk about it on all youtube
Thanks, Erik for this video 🎅
thanks, Nuxt SSR. Very intesting topic.
You navigate in code editor without a mouse is amazing , super fast , accurate and efficient 👍👍, are you just using the arrow key or Vim key bindings etc?
cool tut, so how about adding ionic (or any other framework) to make mobile app with vuetify..?
Great video, thanks! How about Quasar with nuxt3??
Looking forward to the AWS tutorials. Will there be Lambda functions?
Nice! Thank you Eric. It helped me
Great Video! I'd like one video with AXIOS auth, fetch & post so it can be used with Django Rest Framework
Can't wait to play around with my two favorite addons to Vue: Vuetify and Nuxt. But what about state management? useState or Pinia? Would like to hear your take. Thanks for the great video.
Pinia all the way
Awesome video Erik!
Thanks!
Love it Vuetify Nuxt3!
Thanks Erik ! .. excellent video ! much appreciated ! "vuetify nuxt 3" I'm looking forward to your videos about AWS ! Best regards !
Can you try Nuxt with TRPC?
Its really great, just struggeling with hmr on the server
i would also appreciate how would you setup tRPC with nuxt3 as well
Oh so much better without vite-plugin. Thanks Erik
Hey, can u make a video on using vuetify and tailwind?
I find there is too much hype around vuetify. I've waited so long on it, that I've found a replacement(PrimeVue) that I'm quite happy with. I think that Vuetify has still this google material designs that is having less and less traction.
Great video!!!
Can you do one for Nuxt 3, Vuetify 3 and Storybook. The storybook should integrate with storybook.
done! thanks!
I'm on the verge of beginning to use Vim in VS Code. It'd be interesting to hear your take. 🙂
Did you?
@@accutus I started with it but didn't stick to it. I still believe in the fundamental reasoning for doing so... but I just had a lot of code editing to do and kept going back to old habits. 🤷🏼♂
Thank you a lot!
soo cool men thank you!
Glad you like it!
need Vuetify to release full functionality faster :D
vuetify nuxt 3. Thanks!
Thank you so much man
Happy to help
Thanks for this Erik, really useful. Quick update that as of today (January 2023) I also had to install the @mdi/font package as a dev dependency and update the import path in nuxt.config.ts to @mdi/font/css/materialdesignicons.min.css (or @mdi/font/scss/materialdesignicons.scss)
Probably a dumb question, is this approach Three Shakeable?
I think so
No, it isn't, importing components and directives as shown in the video will import everything, the default installation of vuetify 3 uses vite-plugin-vuetify for treeshaking but I haven't tried yet with nuxt
There's now a third party vuetify modules added to nuxt 3
So we can install it as a modules
Thanks for the video tho, it helped me when this was the only way
I think I was expecting the Vue 3 ecosystem to have this stuff a couple years ago when Vue 3 first released. Set myself up for disappointment. Now the Vue ecosystem feels mostly caught up. I might get back into Vue.
Not worth it. I started using vue when it was 0.x version but this vue 3 thing forced me to switch to react and I don't think it's worth going back anymore
@@ludo237 the one thing I like in theory but dislike in practice is react’s take on state management and routing. Because there are no built in or recommended options the developer can really go deep trying to determine how to assemble their project. Granted, I think most have just standardised on Next or some other meta framework but I do appreciate the more curated approach to the ecosystem in practise. However, if I was a happy react dev I doubt I would move ecosystems. At the end of the day they are both JavaScript ecosystems and are capable of much the same things.
@@ludo237I'm working with Vue 2 with ts and vuetify for a couple of years and a new project gives me the opportunity to use Vue 3,nuxt and vuetify 3. And I love it.
The react ecosystem is broken these days. I've been there and react is going the same way as angelur.
What about PrimeVue ? I know Vuetify 3 is quite new (and quite nice :) ) but PrimeVue is quite powerful too with a lot of themes. Are you going to show a little bit of it?
I just can't stand the look of the material design. I just feel like the tabs and the form inputs aren't very intuitive for normal users when compared to the bootstrap versions, IMO.
Can I learn and be good at Vue with only basic knowledge of js???
@@marcinbawolski6723🤭
next we wana see vuetify+nuxt3+auth SSR , some middleware use of both server side middleware and client side middleware example and a full blown app with some realtime database. Forexample, code us a realtime blog with comments and image uploads etc.
It's 9 months later and Vuetify 3 is still incomplete...
Currently using Nuxt 3 & Vuetify 3. The issue I'm experiencing is using environment variables in production. Does anyone have similar issues?
Care to explain your issue?
@@thepragmaticprogrammer Nuxt 3 does not read my .env variables in production mode. I found an issue on this on github, seems like a bug for now
@@_julian I have a video on environment variables with Nuxt3 that might help
You would think it would be in the interest of Vuetify to facilitate things for people like myself. Tailwind does a great job with it. This video and the repo didn't work for me. Too many other alternatives to waste time with Vuetify until they change their position on things... Thanks anyway. I do enjoy your videos.
PrimeVue is my preference. I personally find it better than Vuetify.
Cool video!!
Thanks!
Do the same thing with jetstream inertia vuetify!
Nuxt 3 + Quasar.
You just can use vuetify/styles in css config
thanks for that but how you know about that
Nuxt 3 with ionic framework
npm i vuetify@next sass doesnt work as of latest updates ... please either update or remove your video.
Vuetify Nuxt3!
genial esto
Gracias!
Vuetify Nuxt 3 aws
Material design makes my eyes bleed. No chance I’ll be using Vuetify anytime soon.
Modern days web dev goes too far and is super complex. I miss the old days of using pure HTML, CSS, JS :D
Tailwind CSS is far superior, to every other view/theme framework. Period.
vuetify nuxt 3
(Vuetify*Nuxt )^3
Ngl, I find Material Design to be extremely ugly. Everytime I think about trying Vuetify, I find myself switching back to Tailwind the second I see Vuetify components...
vuetfy nuxt3 ole
vuetify is disappointing, we waited a long time for vuetify, at last we chose quasar
Nuxt is lame and pointless
500
head.addHeadObjs is not a function
at Object.install (./node_modules/vuetify/lib/framework.mjs:52:11) why? i
Thanks Eric
nice
can you please make a video about vuetify treeshaking no one talk about it on all youtube
Vuetify Nuxt3!
vuetify nuxt 3
can you please make a video about vuetify treeshaking no one talk about it on all youtube
Vuetify Nuxt 3!
vuetify nuxt 3
Thanks!
vuetify nuxt 3