Fix CSS loading issues for production deployment

- Set base URL to '/' for Vercel deployment
- Simplified theme imports to use default VitePress theme properly
- Added cssCodeSplit: false to ensure CSS is bundled correctly
- Updated Vercel config with proper caching headers
- Removed manual CSS imports that were causing conflicts

Author: danhnguyen

docs/.vitepress/config.ts

@@ -3,7 +3,7 @@ import { defineConfig } from 'vitepress';
 export default defineConfig({
   title: 'Vue MapLibre GL',
   description: 'Vue 3 components and composables for MapLibre GL JS',
-  base: '/vue-mapbox-gl/',
+  base: '/',
   ignoreDeadLinks: true,
 
   // Ensure default theme is used
@@ -22,11 +22,14 @@ export default defineConfig({
           manualChunks: undefined,
         },
       },
+      cssCodeSplit: false,
     },
   },
 
   // Ensure CSS is properly included
-  head: [['meta', { name: 'theme-color', content: '#3c82f6' }]],
+  head: [
+    ['meta', { name: 'theme-color', content: '#3c82f6' }]
+  ],
 
   themeConfig: {
     nav: [

docs/.vitepress/theme/index.js

@@ -1,15 +1,5 @@
 // .vitepress/theme/index.js
 import DefaultTheme from 'vitepress/theme';
-import 'vitepress/dist/client/theme-default/styles/fonts.css';
-import 'vitepress/dist/client/theme-default/styles/vars.css';
-import 'vitepress/dist/client/theme-default/styles/base.css';
-import 'vitepress/dist/client/theme-default/styles/utils.css';
-import 'vitepress/dist/client/theme-default/styles/icons.css';
-import 'vitepress/dist/client/theme-default/styles/components/custom-block.css';
-import 'vitepress/dist/client/theme-default/styles/components/vp-code.css';
-import 'vitepress/dist/client/theme-default/styles/components/vp-code-group.css';
-import 'vitepress/dist/client/theme-default/styles/components/vp-doc.css';
-import 'vitepress/dist/client/theme-default/styles/components/vp-sponsor.css';
 import './style.css';
 
 export default DefaultTheme;

vercel.json

@@ -1,6 +1,26 @@
 {
   "buildCommand": "yarn docs:build",
   "outputDirectory": "docs/.vitepress/dist",
-  "framework": "vitepress",
-  "installCommand": "yarn install --frozen-lockfile"
+  "framework": null,
+  "installCommand": "yarn install --frozen-lockfile",
+  "headers": [
+    {
+      "source": "/(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=0, must-revalidate"
+        }
+      ]
+    },
+    {
+      "source": "/assets/(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=31536000, immutable"
+        }
+      ]
+    }
+  ]
 }