Why Combine Vuetify 3 and Nuxt 3?
Hey developers, today we are going to talk about two community projects in the Vue ecosystem that I really enjoy. One is Vuetify 3 and the other is Nuxt 3. So they are both the Vue 3 versions. So we're going to talk about how we can combine them into one and how we can use a Nuxt 3 app with Vuetify 3 and how you can get up and running in really, literally just a few minutes.
In my last video, if you didn't already check it out, I talked about Vuetify 3, how it just came out. And Nuxt 3 actually was released earlier this year. So I thought it'd be cool to combine them both. It was actually the number one comment on my last video, how can I use Nuxt 3 and Vuetify 3 together? I think these are a great pairing. I think it's almost like peanut butter and jelly, like these two frameworks should be together because it just makes a really cool experience. It makes it just so much easier to create Vue apps out there.
And if you're completely unfamiliar with these two technologies I'm talking about, so in the Vue 3D world, there is something called Vuetify, which is the material component design framework. It's been out for a long time. It's battle-tested. It was used in Vue 2 forever, now recently in Vue 3. And then Nuxt 3, which is our server-side rendering, static site generating framework for Vue. It's sort of analogous to Next if you're coming from the React ecosystem. So both of these together are extremely popular. They're probably the two most popular frameworks out there.
Choosing the Right Installation Strategy
So today we're going to show you how to get up and running with both of these together so you can start creating really fun apps really quickly. Oh yeah, once again, thank you so much for the outpouring of support from my last video. I'm really jazzed to create more videos. Always leave a comment below of what you want to see next. Definitely I'm going to be doing some AWS stuff, so keep an eye out for that as well. So let's just jump into it.
So before we jump into the code, let's take a look at the official documentation for Vuetify 3. So you may think at first that you just need to go to the Vuetify 3 website and search for the Nuxt installation, but in fact, there's actually no official guide on how to install Vuetify 3 with Nuxt. And I actually talked to John Leider about this. He is the creator of Vuetify in a podcast a few weeks ago. If you're interested, it's called Views on Vue. And he says he really allows the community to come up with these plugins and things like that whenever they want to use Vuetify with something outside of core Vue.
So that leads us to a little bit of a problem because we need to figure out how to do that. I did some research and scouring and looked on some message boards, and there's a few different ways to install Nuxt and Vuetify together, and I'll give you my recommendation of what I think the best way is. So first, there is a plugin called vite-plugin-vuetify. So if you search around in Google, you may actually see this as a one of the ways to install Vuetify with Vite, but I would caution you. There is an open, as of this recording, there is an open issue that when people are using this plugin, they're getting a lot of different errors, especially with the latest release. I would steer away from this solution if you see it, if it uses this vite-plugin-vuetify.
Creating a Custom Nuxt Plugin
On the other hand, a very easy way to do it that just takes a few extra steps, and that is to create Vuetify as a plugin in the Nuxt ecosystem. So if you look right here, and we'll go and we're going to go into the code in a second, in any Nuxt app, you can create a plugins folder, and inside that plugins folder, you can create your own plugin. And inside that plugin, you can initialize everything. And that is really the best way of getting Nuxt and Vuetify to work together as of this recording. And let me preface this by one other thing. As I was going through the Discord and some of the other channels out there for Nuxt, people still have a little little issues here and there even using the plugin approach that I'm showing you. If you do have issues, I would go to the Vuetify website, click on the support at the top and join their Discord channel. As I have any time I had problems, Discord has really helped me out and their channel is great and there's a lot of people out there willing to help you.
One other thing to add, we're going to jump in the code here, but if you like to just start off with the starter template, I found two that were pretty useful. One is this nuxt3-and-vuetify. So everything in this tutorial, if you just want to go and download this repo, I'll put a link in the description for it, but it has it all up and running, exactly everything we're talking about today. And also there is this nuxt3-vuetify-starter-kit, which is by BayBreezy. It uses the Vite plugin, but it uses kind of an older version of Nuxt. So if you want to check out the starter, also put a link in the demo for it.
Initializing the Nuxt 3 Project
Alright, let's jump in the code here. Let's go ahead and create this new Nuxt 3 app. We'll add Vuetify as a plugin, we'll test it out, may even look a little bit of themes. So to begin, for a Nuxt 3 app you have to use npm nuxi init and the name of the directory or the app. So we'll call it vuetify-nuxt-app and this will go ahead and create all the scaffolding for us so we can get it started. And we can simply change directory to it. And you can do npm i, if you're in Yarn, do a yarn and that'll install the dependencies. This will just take a few moments. Cool, so everything installed. And just to make sure, I'm going to install one more thing. I'm going to npm install. We want to install Vuetify, so we'll do vuetify@next and sass. And by the way, as of this recording, to install Vuetify 3, you have to install it vuetify@next still. Uh, if you don't, then you'll get the older version, so keep that in mind.
And we'll just run dev on this real quickly, see if it works. I'll just open up localhost:3000 and take a look. Cool, so we got our starter template here, seems to be working.
Building the Vuetify Plugin
But we don't have Vuetify installed, so there's a couple of things we need to do. Let's just take a look at the folder. So inside this vuetify folder, I will create a new folder called plugins and inside that plugins folder, I'm going to create our new Vuetify plugin. So we'll call it vuetify.ts. And inside this is where we're going to install everything for our plugin.
So let's go and get started with that. First we'll need to import in a few things. So I'm going to import in this createVuetify from vuetify. And I'm also going to create, uh, import * as components from vuetify/components. And by the way, if I just want to install just one or two components, I can actually specifically import them in, but I want to import all the components in the Vuetify library so I'm going to do the * as components. But realize, you don't have to import all them all. And then I'm going to do the same thing for the directives, and as you can imagine that is vuetify/directives.
And the next thing to do is we're going to create the scaffolding for the plugin here. So we need to export default defineNuxtPlugin. You can see right here. And then that takes in this callback function which returns the nuxtApp. And inside here, we can create this vuetify... vuetify, and I'm going to do this createVuetify, and this is where I'm going to put the configuration for Vuetify. This is where you put the components, this is where you put the directives. This is also where we can do the stream theme stuff which I'll show you in a little bit. So we can just do components here. You can see I'm already getting some type completion here, auto completion. So directives. This is by the way the same thing as doing components: components with a key value. And the last thing is we're going to do nuxtApp.vueApp.use and then I'm just going to pass in vuetify.
Configuring Nuxt for CSS and Transpiling
So this creates the plug-in here, but we're not quite done yet. We do have some CSS that we need to get up and running. So if we go to the nuxt.config.ts file, this is where you create your CSS and all the configuration for Nuxt that we'll need. So inside here, I'm going to put css:, and call it vuetify/lib/styles/main.sass. This is the path to the, to the basically the CSS or SASS in this case. And then we're also going to do this build. You have to transpile it. transpile, and then this is an array, and we'll just pass in vuetify here.
Cool. So basically this is the basics of getting started, but obviously you probably want to add in some icons. So let's go ahead and install the MDI icons. So in the command line here, I'm just going to do npm i @mdi/font, but you can certainly install whatever fonts that you want that'll work with Vuetify. And then I just need to add in one more in here. So I'll have to put in the path to this font. Braces are hard. see @mdi/font/css/materialdesignicons.min.css. I think I spelled that right. Cool. So now we should have this all configured correctly and we need to start it to start to test it out. So we'll do npm run dev again.
Testing the Integration with a Wireframe
Okay, it went ahead and ran. Uh, off camera I went ahead and opened and closed VS Code again just to make sure I was in the right directory here, but you can see here, it automatically ran everything. Looks great. But let's see if the actual Vuetify is working. So one easy way to do that, if we go to the wireframes part of the Nuxt, vuetifyjs website, you can see it has all these templates or wireframes that you can just kind of add into your app to get started. So I thought it'd be kind of cool, let's just look at the inbox one real quickly. And let's see if we can add this in. So we can just click this little GitHub icon in the bottom right hand corner. I'm going to click this little copy content, and I'm just going to paste this in here. And if I've done everything correctly, it should update. Wow, that's quick. So it already updated. You can see here, I have this full translation here. Looks like, looks exactly like the wireframe. So we know that Vuetify is working correctly. It's noticing everything. So let's take a look at one more thing before we finish up here.
Implementing Vuetify Theming
So in this vuetify typescript file, I was talking about theming earlier, and you can actually do some themes on it. So inside createVuetify here, since I'm using typescript I get this autocompletion here. I can see theme. And inside this theme I can actually create my own themes. If I wanted to do this, I can put in this themes object, and I can create my own theme if I wanted to. I won't get into that, but there is, if you go import up here, there's something called a ThemeDefinition. And then so what I could do is I can create my own theme, and I'll put it, I'll type it as ThemeDefinition, and you can see here you can put in the colors, you can put variables, whatever you need inside here. So you can just like literally create your own theme, pick your primary, secondary colors. It's pretty powerful.
And then what you can do is you would pass it into this teams object here. Instead of themes here, you would just put in the name of this myTheme. But instead of doing that, I thought I'd show you, you can actually put in a default theme here, and I can just put in dark mode. So let's take a look at what that looks like. So if I put in dark here and save it, now I've just with one piece of code here, I've changed the whole look and feel. Now it's in a dark mode. If I take it back out or put in light mode, then it goes back and refreshes and it's back in light mode. And you can even do this dynamically if you wanted to inside your components. There's a whole guide on it here if you go into Features and go into Theming, it talks about how you change the default theme, and right here it says you can change the theme by importing this useTheme composable and then you can change it on the fly, which is really cool.
Conclusion and Next Steps
So cool. So this is up and running. If I wanted to at this point, I can compile this. I can run it. I can use whatever I want. So now we have Nuxt and Vuetify together just like peanut butter and jelly.
If you like this video, leave a comment below, let me know what you want to see next. And if you made it all the way again, put in the comments today, 'Vuetify Nuxt 3'. Have you defined Nuxt 3? And that'll let me know that you made it all the way to the end of video. I really appreciate it. Thanks. I had such amazing outpouring and support from my first video, video, makes me really want to keep doing these videos, keep teaching you guys. And I actually have a ton of stuff on the AWS side I want to show you. I'm an AWS developer and I got some cool stuff to show you, uh, coming soon for that too. So thanks.
