Vite Setup for Adding Vuetify 3 to Nuxt 3

If you’re looking to add Vuetify 3 to your Nuxt 3 project with Vite, you’re in the right place. In this article, we’ll go through the steps to set up Vuetify 3 with Nuxt 3 using Vite as the build tool.

Step 1: Create a new Nuxt 3 project

The first step is to create a new Nuxt 3 project. You can do this by running the following command in your terminal:

      
        npx create-nuxt-app@edge my-nuxt-app
      
    

Step 2: Install Vuetify 3

Once your Nuxt 3 project is set up, navigate to the project folder and install Vuetify 3 by running the following command:

      
        npm install vuetify@3
      
    

Step 3: Configure Vuetify

Next, you’ll need to configure Vuetify in your Nuxt 3 project. Create a new file called vuetify.config.js in the root of your project with the following content:

      
        import { createVuetify } from 'vuetify'

        export default createVuetify() 
      
    

Step 4: Integrate Vuetify with Nuxt 3

To integrate Vuetify with Nuxt 3 using Vite, open your nuxt.config.js file and add the following code:

      
        export default {
          build: {
            vite: {
              optimizeDeps: {
                include: [
                  'vuetify'
                ]
              }
            }
          },
          vuetify: {
            customVariables: ['~/assets/variables.scss'],
            optionsPath: './vuetify.config.js'
          }
        }
      
    

Step 5: Use Vuetify components

Now that Vuetify is set up in your Nuxt 3 project, you can start using Vuetify components in your Vue files. For example:

Conclusion

That’s it! You’ve successfully set up Vuetify 3 with Nuxt 3 using Vite as the build tool. You can now start incorporating Vuetify components into your Nuxt 3 project and create beautiful user interfaces with ease.