How to add Vuetify (3) to Nuxt 3 Application

In this video, you will learn how to add Vuetify 3 To any Nuxt 3 Project.
-- Connect With Me --
Discord: / discord
Twitter: / jahiddev
DigitalOcean free $200 credit link: m.do.co/c/82e70b3f86db
Code: github.com/jahidanowar/nuxt3-...
-- Recommended Videos
Build a Nuxt 3 Tailwind CSS blog from scratch: • Build a Nuxt 3, Tailwi...
Deploy Nuxt3 Project on Digital Ocean: • Deploy Nuxt 3 App on D...
-- More About Vuetify 3 Integreation
In this video, we will learn how to add Vuetify (version 3) to a Nuxt (version 3) application. Vuetify is a popular UI library for Vue.js that provides a set of reusable and stylized components for building web interfaces. Nuxt is a framework for creating server-rendered Vue.js applications, and it's built on top of Vue.js and webpack.
We will start by installing the necessary dependencies, including Vuetify and its peer dependencies. Then, we will configure Nuxt to use Vuetify by adding it to the buildModules section in the nuxt.config.js file.
Next, we will create a layout file that wraps our application with the Vuetify component and defines the theme and other global styles. We will also create a page that uses some of the Vuetify components, such as a navigation drawer and a grid layout.
Finally, we will see how to customize the appearance of the Vuetify components by defining our own styles or by overriding the default theme variables.
By the end of this tutorial, you will have a basic understanding of how to add Vuetify to a Nuxt application and how to use its components to build a modern and responsive user interface.
I hope this helps! Let me know if you have any questions or need further assistance.
-- Timestamps --
00:00 Introduction
00:20 Nuxt 3 Project Setup
01:40 Installing Vuetify 3
03:50 Creating a Nuxt Plugin
07:15 Setting the Compilation option
07:35 Installing SAAS in Nuxt
08:15 Testing the Vuetify Components
10:05 Adding Material Icon support

[@joeokat]

Thank you for making it simpler, been searching for such a video for a week now. Most Devs seem too focused on tailwind.

[@jahiddev]

My pleasure!

[@marcusbrederfalt8364]

Thank you so much for this! Works great :)

[@jahiddev]

You're welcome!

[@jordanmiller4147]

thanks helped me a lot

[@usmankhalid857]

thankew brother @jahid Anowar. it helped me a lot. wishing you best of luck.

[@epic3386]

Thank you so much for this!

[@jahiddev]

Glad it was helpful!

[@jekas5175]

Thank you. Helpfyl!

[@jahiddev]

You're welcome!

[@FrederikHeld]

Awesome, thank you so much for sharing! JS/TS Frameworks are cool, but setting them up to inter-operate can be a nightmare. With your tutorial it works flawlessly. All tutorials should be like that 🙂

[@jahiddev]

You're very welcome!

[@guillermomazzari4983]

very nice, thanks for sharing!!

[@jahiddev]

Thanks for watching!

[@legonz5047]

Thx. Helped me to get vuetify into Nuxt.

[@Xproject467]

Thanks sir!

[@jahiddev]

You are welcome!

[@69guigz]

Thanks a lot !

[@jahiddev]

You are welcome!

[@dipumondal6128]

Much needed. But have shifted to tailwind.

[@yes_its_prashant]

Awesome video. Can u make a video on strapi? There's a lot of buzz around it nowadays.

[@baraa7869]

thanks

[@jahiddev]

You're welcome!

[@BillaSaheb786]

Awesome... Please make tutorial and project on Nuxt 3 and Vue 3 JS

[@jahiddev]

Sure thing

[@augischadiegils.5109]

nice

[@jahiddev]

Thanks

[@100kshooter5]

Thank you for a great video, but how can we add unit test with ie vitest and also storybookjs

[@jahiddev]

Nice idea for next video.

[@maikzimmermann1550]

did everything you did in the video. But i still get [Vue warn]: Failed to resolve component: v-btn

[@jahiddev]

Possible solutions
1. Re run the app
2. Check if you have registered the veutify plugin inside nuxt config
Anyway if the problem still exists you can check my repository.

[@user-hk8jy8gs6d]

My whole vuetify is works fine. but my tabs are not working. Error is "failed to resolve component". how do i fix this?

[@jahiddev]

Can you try manually adding the component into your SFC?

[@user-hk8jy8gs6d]

Yes i do! but the error is still the same.@@jahiddev

[@CODE-ze7oe]

Now can use calendar vuetify with Nuxt3?, I can't use it

[@jahiddev]

You can use it. I have use it personally.

[@CODE-ze7oe]

@@jahiddev Are you use vuetify2 ? , I couldn’t see in doc vuetify3 calendar.

[@easymusic3781]

Also only client-only using

[@jahiddev]

Now you can use the dedicated nuxt plugin using SSR mode. I will make a new video about this.

[@user-vt9du8dj5e]

thanks for your great video. pls learn us more about nuxt3

[@jahiddev]

Thanks, will do!

[@toniclementegarcia6656]

in my case it doesn't take vuetify's main.css. It shows this error:
[sass] @forward rules must be written before any other rules. 12:10:28
╷
3 │ @forward './settings'
node_modules\vuetify\lib\styles\main.sass 3:1 root stylesheet

[@oscarpowers637]

You are doing a great job on your channel!!! Your best option is to make an account with promo sm!

[@jahiddev]

Thank you so much!!