Skip to content

Template to get you up and running with Nuxt 3 & Vuetify 3

Notifications You must be signed in to change notification settings

stephenjason89/nuxt3-vuetify3-starter

 
 

Repository files navigation

Nuxt 3 + Vuetify 3 Starter

Starter Image 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

Online Demo

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

  1. Install the deps
npm install
  1. Run the app
npm run dev

Stuff 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

About

Template to get you up and running with Nuxt 3 & Vuetify 3

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 56.2%
  • Vue 34.8%
  • SCSS 9.0%