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.
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',
],
}
})
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,
},
},
});