Vuetify 3 + Nuxt 3 : Vue.js Will Never Be The Same
HTML-код
- Опубликовано: 20 ноя 2022
- Vuetify 3 and Nuxt.js 3 are out! But how do you combine it? Is it worth it? In this video I explore adding these two technologies together, and the pros and cons of it!
👉Check out my last videoon getting started with Vuetify 3
• Vuetify 3.0 Major Rele...
👉 Sign up and get free Vue cheat sheets and updates!
www.vuecourse.tech
👉 Need some help with a project, level up your skills, Vuetify or Nuxt bug? Check out my 1-on-1 mentoring!
mentorcruise.com/mentor/erikh...
Links
github.com/CodyBontecou/nuxt3...
github.com/BayBreezy/nuxt3-vu...
github.com/nuxt/framework/iss...
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?
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
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!
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.
tank you erik i am a huge fan of you i see all videos you have been create for vue js
Nice! Thank you Eric. It helped me
Great video!
I would like to see something using markdown for content and multilanguages
Awesome for this tutorial, Waiting on the AWS+(Nuxt3||Vue3)+Vuetify
Coming soon!
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
Thanks, Erik for this video 🎅
Awesome video Erik!
Thanks!
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!
done! thanks!
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.
Thank you a lot!
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!
thanks, Nuxt SSR. Very intesting topic.
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?
Love it Vuetify Nuxt3!
Thanks Erik ! .. excellent video ! much appreciated ! "vuetify nuxt 3" I'm looking forward to your videos about AWS ! Best regards !
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)
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?
Dear Eric: I WAS WAITING FOR THIS ONE SINCE TOO LONG haha
December will be Nuxt 3 month for me.
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.
Any significant advantages of this combo over Quasar?
Great video!!!
Can you do one for Nuxt 3, Vuetify 3 and Storybook. The storybook should integrate with storybook.
Thank you so much man
Happy to help
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
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.
Looking forward to the AWS tutorials. Will there be Lambda functions?
soo cool men thank you!
Glad you like it!
Great Video! I'd like one video with AXIOS auth, fetch & post so it can be used with Django Rest Framework
cool tut, so how about adding ionic (or any other framework) to make mobile app with vuetify..?
great vuetify & nuxt 3 video. Now how about element-plus & UnoCSS?
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.
Thanks for this video. Can one use vuetify 3 on production now.
Great video, thanks! How about Quasar with nuxt3??
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
Hey, can u make a video on using vuetify and tailwind?
Cool video!!
Thanks!
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
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. 🤷🏼♂
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
vuetify nuxt 3. Thanks!
can you please make a video about vuetify treeshaking no one talk about it on all youtube
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.
Thanks Eric
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
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.
Oh so much better without vite-plugin. Thanks Erik
need Vuetify to release full functionality faster :D
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
@@trainedlizard6296 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.
@@trainedlizard6296I'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?
genial esto
Gracias!
Can I learn and be good at Vue with only basic knowledge of js???
@@marcinbawolski6723🤭
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
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.
Vuetify Nuxt3!
It's 9 months later and Vuetify 3 is still incomplete...
Vuetify Nuxt 3!
Nuxt 3 + Quasar.
Do the same thing with jetstream inertia vuetify!
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 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.
PrimeVue is my preference. I personally find it better than Vuetify.
Vuetify Nuxt 3
Vuetify Nuxt 3 aws
vuetify nuxt 3
Material design makes my eyes bleed. No chance I’ll be using Vuetify anytime soon.
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...
(Vuetify*Nuxt )^3
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.
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
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!