Nuxt 3 + Vuetify 3 Starter
Nuxt 3 is now stable. Vuetify 3 is now stable. I will be updating this template as we go along. Feel free to open an issue if you have any questions or suggestions.
This template here will get you up & running with adding the two together :)
Demo Here
How to use
As time passes, I will be updating this template. It will grow with some more pages. It all started with the login & register pages. I may keep a running list of pages added here.
Pages
Click to see the pages added & planned
- Login
- Register
- Reset Password
Run the app
- Install the deps
npm install- Run the app
npm run devStuff used
- NuxtJS
- Nuxt Icon
- Sass
- Vuetify
- kevinmarrec/nuxt-pwa
- Vite Plugin Vuetify
Custom Sass File
The .scss file that can be found in the assets folder have some gradients & other styles. They can be deleted or updated.
Helpers Folder Utils Folder
The helper utils folder contains the custom stuff for the Vuetify plugin
Custom Icons - customIcons.ts
So I switched from the nuxt-icon module to the @iconify/vue component here. It plays better with Vuetify with custom icons
Here is a link to the docs for this Creating a custom iconset
Global Defaults - defaults.ts
This file here just set global props on different vuetify components. You can learn more here Global Configuration
Themes - themes.ts
This file will hold all the different themes that you want to use in your app. Feel free to add more crazy schemes lol. Learn more here: Vuetify Themes
Form Rules - Composable
I added one composable for form rules. Add more here. You can even try integrating other validation packages like yup or zod
Yup & Vee-Validate
I will definitely be switching to vee-validate for dealing with forms.
Icons
The public folder contains a favicon & icon. Change these out for your app and be sure to tweak the pwa config inside the nuxt.config file to fit your app