Vuetify 3 + Nuxt 3 : Vue.js Will Never Be The Same

[@ProgramWithErik]

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

[@armoredwarfareclub4450]

Also, you can check how nuxt 3 works with vuestic-ui. :))

[@umer.on.youtube]

Hey Erik, could you stop with Material UI and start with Tailwind or other frameworks please?

[@marvinsequera]

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]

Awesome!

[@cameronfulton5677]

thanks for this tutorial! Exactly what I was looking for to help start porting over a legacy codebase to vue3+nuxt+vuetify

[@lifeofdandotme]

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.

[@nicolas_reibnitz]

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]

@@nicolas_reibnitz we can really make chrome extension faster with Quasar?

[@nicolas_reibnitz]

@@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.

[@nicolas_reibnitz]

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.

[@nicolas_reibnitz]

Don't get me wrong, @ProgramWithErik is great! Luke just really specializes in Quasar stuff.

[@brandonleichty]

Love seeing more Vue videos from you in my notifications! 🥳

[@tomwedge308]

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

[@quasardev975]

Awesome for this tutorial, Waiting on the AWS+(Nuxt3||Vue3)+Vuetify

[@ProgramWithErik]

Coming soon!

[@atiqbaqi]

@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?

[@amirmohammadsanji]

tank you erik i am a huge fan of you i see all videos you have been create for vue js

[@alfonsocontreras6586]

Great video! I would like to see something using markdown for content and multilanguages

[@dev-am1303]

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.

[@hado.uken_]

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!

[@abhisekhwebappssol]

Thanks, Erik for this video 🎅

[@breezycodes]

Hey, thanks for mentioning my repo 😊

[@ProgramWithErik]

No problem!

[@bombrman1994]

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.

[@ProgramWithErik]

Sounds great!

[@shayani]

Nice! Thank you Eric. It helped me

[@benediktschwab4988]

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.

[@codewithguillaume]

Dear Eric: I WAS WAITING FOR THIS ONE SINCE TOO LONG haha December will be Nuxt 3 month for me.

[@jeffkarr9580]

Thanks Erik ! .. excellent video ! much appreciated ! "vuetify nuxt 3" I'm looking forward to your videos about AWS ! Best regards !

[@mahmoudkamal9919]

can you please make a video about vuetify treeshaking no one talk about it on all youtube

[@jorgecardenas4058]

Great Video! I'd like one video with AXIOS auth, fetch & post so it can be used with Django Rest Framework

[@stephenrogers5458]

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.

[@omolayoleogunyemi7038]

Thanks for this video. Can one use vuetify 3 on production now.

[@MigalYaroslav]

thanks, Nuxt SSR. Very intesting topic.

[@raynescofield8178]

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?

[@aminem2080]

cool tut, so how about adding ionic (or any other framework) to make mobile app with vuetify..?

[@guillermomazzari4983]

Great video, thanks! How about Quasar with nuxt3??

[@mrrolandlawrence]

great vuetify & nuxt 3 video. Now how about element-plus & UnoCSS?

[@joeczucha5686]

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)

[@codedjango]

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

[@timmycanfly]

Awesome video Erik!

[@ProgramWithErik]

Thanks!

[@anuzis]

Any significant advantages of this combo over Quasar?

[@giorgidgebuadze219]

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?

[@michaelvonbargen9603]

Can you try Nuxt with TRPC? Its really great, just struggeling with hmr on the server

[@cindrmon]

i would also appreciate how would you setup tRPC with nuxt3 as well

[@mxd3bill70]

Hey, can u make a video on using vuetify and tailwind?

[@drewbird87]

I'm on the verge of beginning to use Vim in VS Code. It'd be interesting to hear your take. 🙂

[@accutus]

Did you?

[@drewbird87]

@@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. 🤷🏼‍♂

[@ndwsolutions6473]

Great video!!! Can you do one for Nuxt 3, Vuetify 3 and Storybook. The storybook should integrate with storybook.

[@k16e]

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.

[@joffff]

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.

[@cakeside]

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.

[@guillermomedel1575]

Pinia all the way

[@vladshepeluk7442]

done! thanks!

[@xXLeGrandStanXx]

Thank you a lot!

[@TonyGizer]

Looking forward to the AWS tutorials. Will there be Lambda functions?

[@kpax-experience]

Oh so much better without vite-plugin. Thanks Erik

[@RiazUddinMasum]

Love it Vuetify Nuxt3!

[@adnanrruka5152]

vuetify nuxt 3. Thanks!

[@hixday93800]

Thank you so much man

[@ProgramWithErik]

Happy to help

[@jiasheanleong7918]

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

[@АлександрКоломыцев-х1ю]

soo cool men thank you!

[@ProgramWithErik]

Glad you like it!

[@maaags_]

need Vuetify to release full functionality faster :D

[@RodoRomanV]

Probably a dumb question, is this approach Three Shakeable?

[@ProgramWithErik]

I think so

[@Vladimir-eb8ve]

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

[@j4nch]

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.

[@riclerico]

Can I learn and be good at Vue with only basic knowledge of js???

[@riclerico]

@@marcinbawolski6723🤭

[@0xJuIian]

Currently using Nuxt 3 & Vuetify 3. The issue I'm experiencing is using environment variables in production. Does anyone have similar issues?

[@thepragmaticprogrammer]

Care to explain your issue?

[@0xJuIian]

@@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

[@thepragmaticprogrammer]

@@0xJuIian I have a video on environment variables with Nuxt3 that might help

[@ozrtie]

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.

[@DavidGriffis]

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.

[@fikrihanda]

You just can use vuetify/styles in css config

[@zain_x_alpha]

thanks for that but how you know about that

[@lexand007]

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?

[@mahtoosacks]

Do the same thing with jetstream inertia vuetify!

[@RichColemanTx]

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.

[@ahmadmuraish1144]

npm i vuetify@next sass doesnt work as of latest updates ... please either update or remove your video.

[@angelhdzdev]

Nuxt 3 + Quasar.

[@omarguerra6483]

genial esto

[@ProgramWithErik]

Gracias!

[@princejohnsantillan]

PrimeVue is my preference. I personally find it better than Vuetify.

[@TonyGizer]

Vuetify Nuxt3!

[@KevinVandyTech]

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.

[@ludo237]

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

[@lifeofdandotme]

@@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.

[@Tarabass]

​@@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.

[@JeffPohlmeyer]

It's 9 months later and Vuetify 3 is still incomplete...

[@khaledomara6246]

Nuxt 3 with ionic framework

[@magnetto90]

Cool video!!

[@ProgramWithErik]

Thanks!

[@johnmoore6753]

Vuetify Nuxt 3 aws

[@alejandromut]

Material design makes my eyes bleed. No chance I’ll be using Vuetify anytime soon.

[@SkipThorp]

vuetify nuxt 3

[@luzaw4957]

Modern days web dev goes too far and is super complex. I miss the old days of using pure HTML, CSS, JS :D

[@coderke5650]

(Vuetify*Nuxt )^3

[@kaibe5241]

Tailwind CSS is far superior, to every other view/theme framework. Period.

[@TruePac]

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...

[@rubickon]

vuetify is disappointing, we waited a long time for vuetify, at last we chose quasar

[@danel1922]

vuetfy nuxt3 ole

[@_nom_]

Nuxt is lame and pointless

[@виртуоз_ру]

Thanks Eric

[@mehedihasansony]

500 head.addHeadObjs is not a function at Object.install (./node_modules/vuetify/lib/framework.mjs:52:11) why? i

[@quangquoc]

nice

[@mahmoudkamal9919]

can you please make a video about vuetify treeshaking no one talk about it on all youtube

[@zac_t]

Vuetify Nuxt3!

[@RonChaplin702]

vuetify nuxt 3

[@mahmoudkamal9919]

can you please make a video about vuetify treeshaking no one talk about it on all youtube

[@RSandona]

Vuetify Nuxt 3!

[@MartyNZ64]

vuetify nuxt 3

[@ProgramWithErik]

Thanks!

[@MartinAlix]

vuetify nuxt 3