What are the steps to create a Laravel 9 project utilizing Vuetify and Vite?

edit

Create a new file named vite.config.js in the project root directory and add the following code to enable Vue.js with Vite:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
 plugins: [vue()],
});

In the client folder, create a new file named main.js and add the following code to activate Vuetify:

import { createApp } from 'vue';
import App from './App.vue';
import 'vuetify/dist/vuetify.min.css';
import { createVuetify } from 'vuetify';

const vuetify = createVuetify({
 theme: {
   themes: {
     light: {
       primary: '#4CAF50',
       secondary: '#9C27b0',
       accent: '#8c9eff',
       error: '#b71c1c',
     },
   },
 },
});

createApp(App).use(vuetify).mount('#app');

In the client folder, create a new file named App.vue and add the following code:

<template>
 <v-app>
   <v-main>
     <router-view></router-view>
   </v-main>
 </v-app>
</template>

<script>
export default {
 name: 'App',
};
</script>

<style>
</style>

In the client folder, create a new file named router.js and add the following code to enable Vue Router:

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
 {
   path: '/',
   name: 'Home',
   component: () => import(/* webpackChunkName: "about" */ './views/Home.vue'),
 },
 {
   path: '/about',
   name: 'About',
   component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
 },
];

const router = createRouter({
 history: createWebHistory(),
 routes,
});

export default router;

In the client folder, create a new file named views/Home.vue and add the following code:

<template>
 <h1>Home</h1>
</template>

<script>
export default {
 name: 'Home',
};
</script>

<style>
</style>

In the client folder, create a new file named views/About.vue and add the following code:

<template>
  <h1>About</h1>
</template>

<script>
export default {
  name: 'About',
};
</script>

<style>
</style>

Modify the webpack.mix.js file in the project root directory to add the Vite build process, Vuetify stylesheet and Vue.js libraries:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .webpackConfig({
      devServer: {
           proxy: 'http://localhost:8000',
           watchFiles: ['client/**/*'],
           open: true,
      },
    })
   .vuetify('vuetify-loader')
   .vue({ version: '2.6.14' })
   .version();