remove 550kb of vuetify bloat per page

assets/scss/vuetifyCustomization.scss

@@ -1,8 +1,17 @@
-.v-list-item__overlay {
-  background-color: rgb(var(--v-theme-primary)) !important;
+.v-app-bar {
+  border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
 }
 
-.backdrop {
+.v-app-bar,
+.v-navigation-drawer {
   background-color: rgba(var(--v-theme-background), 0.75) !important;
   backdrop-filter: blur(8px);
 }
+
+.v-list {
+  background: inherit !important;
+}
+
+.v-list-item__overlay {
+  background-color: rgb(var(--v-theme-primary)) !important;
+}

components/TableOfContents.vue

@@ -49,20 +49,24 @@
 </script>
 
 <template>
-  <v-list class="pt-0">
+  <v-list>
     <v-list-item subtitle="Contents" />
     <v-divider />
     <template v-if="props.toc" v-for="h2 in props.toc.links" :key="h2.id">
       <v-list-item density="compact" :to="`#${h2.id}`" :title="h2.text" :active="activeLink === h2.id" />
       <template v-for="h3 in h2.children" :key="h3.id">
-        <v-list-item :to="`#${h3.id}`" :subtitle="h3.text" :active="activeLink === h3.id" class="ps-8 tiny" />
+        <v-list-item :to="`#${h3.id}`" :subtitle="h3.text" :active="activeLink === h3.id" class="nested" />
       </template>
     </template>
   </v-list>
 </template>
 
-<style>
-  .tiny {
+<style scoped>
+  .v-list {
+    padding-top: 0;
+  }
+  .nested {
+    padding-inline-start: 32px !important;
     min-height: 32px !important;
   }
 </style>

error.vue

@@ -13,7 +13,7 @@
 
 <template>
   <v-app>
-    <v-container class="fill-height flex-column justify-center text-center">
+    <v-container>
       <span>
         <v-img src="/emoji/orishy.png" alt="oriShy" :width="112" :height="112" />
       </span>
@@ -27,3 +27,14 @@
     </v-container>
   </v-app>
 </template>
+
+<style scoped>
+  .v-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+</style>

package.json

@@ -9,14 +9,14 @@
   },
   "dependencies": {
     "@fontsource/nunito-sans": "^5.0.13",
-    "@mdi/font": "^7.4.47",
     "@nuxt/content": "^2.12.1",
     "nuxt": "^3.11.2",
     "remark-orimoji": "file:./remark/orimoji"
   },
   "devDependencies": {
+    "@mdi/js": "^7.4.47",
     "prettier": "^3.2.5",
-    "sass": "^1.77.1",
+    "sass": "^1.74.1",
     "shiki": "^1.5.2",
     "vite-plugin-vuetify": "^2.0.3",
     "vuetify": "^3.6.5"

pages/docs/[...slug].vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+  import { mdiTableOfContents } from '@mdi/js'
+
   const page = useCurrentContent()
   const toc = page.value?.body?.toc
 
@@ -8,7 +10,7 @@
 <template>
   <v-app-bar :title="page?.title">
     <template #prepend>
-      <v-btn icon="mdi-table-of-contents" @click="showNavigation = !showNavigation" />
+      <v-btn :icon="mdiTableOfContents" @click="showNavigation = !showNavigation" />
     </template>
   </v-app-bar>
   <v-navigation-drawer v-model="showNavigation" permanent :width="280">

plugins/vuetify.ts

@@ -1,11 +1,17 @@
-import '@mdi/font/css/materialdesignicons.css'
-
-import 'vuetify/styles'
+import '@/styles/main.scss'
 import { createVuetify } from 'vuetify'
+import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
 
 export default defineNuxtPlugin((app) => {
   const vuetify = createVuetify({
     ssr: true,
+    icons: {
+      defaultSet: 'mdi',
+      aliases,
+      sets: {
+        mdi,
+      },
+    },
     theme: {
       defaultTheme: 'wotw',
       themes: {
@@ -34,10 +40,6 @@ export default defineNuxtPlugin((app) => {
       },
       VAppBar: {
         flat: true,
-        class: 'backdrop border-b',
-      },
-      VNavigationDrawer: {
-        class: 'backdrop',
       },
       VList: {
         density: 'compact',

styles/main.scss

@@ -0,0 +1,2 @@
+@use './settings';
+@use 'vuetify';

styles/settings.scss

@@ -0,0 +1,4 @@
+@forward 'vuetify/settings' with (
+  $color-pack: false,
+  $utilities: false
+);