Vite and Vuetify Setup

In this section, it is mentioned how your vite and vuetify configurations should be for Olotap and this section is a continuation of create-a-test-project-with-vite.

Vite.config.js

Your vite.config.js file should looks like as below.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
import { fileURLToPath, URL } from 'node:url'

// https://vite.dev/config/
export default defineConfig({
  transpileDependencies: ["vuetify"],
  plugins: [
    vue({ 
      template: { 
        transformAssetUrls
      }
    }),
    vuetify({
      autoImport: true,
    }),
  ],
  define: { 
    'process.env': {},
    // enable hydration mismatch details in production build
    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true',
  },
  server: {
    host: '0.0.0.0',
    port: 3000
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
    extensions: [
      '.js',
      '.json',
      '.jsx',
      '.mjs',
      '.ts',
      '.tsx',
      '.vue',
    ],
  }
})

Vuetify.js

Your plugins/vuetify.js config file should looks like as below.

// Styles
import "vuetify/styles";

// Translations provided by Vuetify
import { en, tr } from "vuetify/locale";
import { aliases, mdi } from 'vuetify/iconsets/mdi'

// Composables
import { createVuetify } from "vuetify";

// Vuetify 
export default createVuetify({
  locale: {
    locale: "en",
    fallback: "en",
    messages: { tr, en },
  },
  theme: {
    defaultTheme: 'light',
    themes: {
      light: {
        dark: false,
        colors: {
          background: "#f0f0f1",
          surface: "#FFFFFF",
          primary: "#FFFFFF",
          secondary: "#eeeeee",
          error: "#ed0505",
          info: "#00CAE3",
          // success: '#4CAF50',
          // warning: '#FB8C00',
        },
      },
      dark: {
        dark: true,
        colors: {
          background: '#121212',  // background
          surface: '#1E1E1E',      // cards vb.
          primary: '#403f3f',      // main color in gray tone
          secondary: '#494b4d',    // lighter gray
          accent: '#7a7c7d',       // accent gray
          error: '#CF6679',
          info: '#607D8B',         // blue-gray
          success: '#4CAF50',
          warning: '#FB8C00'
        }
      }
    },
  },
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi,
    },
  },
});