Pre-render App with vite-ssg

package.json

@@ -3,24 +3,26 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
-    "build": "vite build"
+    "build": "vite-ssg build"
   },
   "dependencies": {
-    "@googlemaps/js-api-loader": "^1.4.0",
-    "@types/google.maps": "^3.48.3",
-    "@vitejs/plugin-vue": "^2.2.4",
-    "@vueuse/core": "^8.2.0",
-    "fflate": "^0.7.3",
+    "@types/google.maps": "^3.50.4",
+    "@vitejs/plugin-vue": "^3.1.2",
+    "@vueuse/core": "^9.3.1",
+    "fflate": "^0.7.4",
     "js-base64": "^3.5.2",
-    "tailwindcss": "^3.0.23",
+    "tailwindcss": "^3.2.1",
     "tatween": "^0.2.0",
-    "vue": "^3.0.0-rc.1"
+    "vue": "^3.2.41"
   },
   "devDependencies": {
-    "@vue/compiler-sfc": "^3.0.0-rc.1",
-    "autoprefixer": "^10.2.6",
-    "postcss": "^8.1.1",
-    "postcss-cli": "^8.0.0",
-    "vite": "^2.4.0"
+    "@googlemaps/js-api-loader": "^1.14.0",
+    "@vue/compiler-sfc": "^3.2.41",
+    "@vueuse/head": "^0.9.8",
+    "autoprefixer": "^10.4.12",
+    "postcss": "^8.4.18",
+    "postcss-cli": "^10.0.0",
+    "vite": "^3.1.8",
+    "vite-ssg": "^0.21.1"
   }
 }

src/App.vue

@@ -1,7 +1,9 @@
 <template>
     <div class="md:flex flex-1 md:items-stretch md:flex-row">
         <div class="h-[60%] md:h-full w-full">
-            <Map :density="density" :startHash="startHash" ref="mapComponent" @densityChange="densityUpdate" @hashChange="hashUpdate" @surfaceUpdate="surfaceUpdate" />
+            <client-only>
+                <Map :density="density" :startHash="startHash" ref="mapComponent" @densityChange="densityUpdate" @hashChange="hashUpdate" @surfaceUpdate="surfaceUpdate" />
+            </client-only>
         </div>
         <div class="flex flex-col relative w-full lg:w-2/3 py-2 md:px-4 font-sans md:border-l border-gray-500 bg-slate-100">
             <div class="order-last md:order-first px-4 mb-4 md:mb-0 md:px-0">
@@ -68,7 +70,7 @@ import { computed, ref } from '@vue/reactivity';
 
 const surface = ref(0);
 const density = ref(1.5);
-const startHash = window.location.hash && window.location.hash.length > 3 ?
+const startHash = !import.meta.env.SSR && window.location.hash && window.location.hash.length > 3 ?
                 window.location.hash.substring(1) : ''
 
 const mapComponent = ref();

src/components/Map.vue

@@ -6,12 +6,14 @@
 </template>
 
 <script setup lang="ts">
-    import { Loader } from '@googlemaps/js-api-loader';
     import { Base64 } from 'js-base64'
     import { onMounted, ref, watch, computed } from 'vue';
     import { watchDebounced } from '@vueuse/core'
     import { zlibSync, unzlibSync } from 'fflate';
 
+    import * as GMaps from '@googlemaps/js-api-loader'
+    const { Loader } = GMaps
+
     const DEFAULT_MAP_POSITION = [48.862895, 2.286978, 18]
     
     const loader = new Loader({

src/main.js

@@ -1,6 +1,6 @@
-import { createApp } from 'vue'
+import { ViteSSG } from 'vite-ssg/single-page'
 
 import App from './App.vue'
 import './index.css'
 
-createApp(App).mount('#app')
+export const createApp = ViteSSG(App)

vite.config.js

@@ -13,6 +13,10 @@ export default defineConfig({
         },
     },
 
+    optimizeDeps: {
+        entries: ['@googlemaps/js-api-loader']
+    },
+
     server: {
         https: false,
     }