kopia lustrzana https://github.com/paraboul/mapchecking
Pre-render App with vite-ssg
rodzic
77bff428c9
commit
7ec11519e5
28
package.json
28
package.json
|
@ -3,24 +3,26 @@
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "vite build"
|
"build": "vite-ssg build"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@googlemaps/js-api-loader": "^1.4.0",
|
"@types/google.maps": "^3.50.4",
|
||||||
"@types/google.maps": "^3.48.3",
|
"@vitejs/plugin-vue": "^3.1.2",
|
||||||
"@vitejs/plugin-vue": "^2.2.4",
|
"@vueuse/core": "^9.3.1",
|
||||||
"@vueuse/core": "^8.2.0",
|
"fflate": "^0.7.4",
|
||||||
"fflate": "^0.7.3",
|
|
||||||
"js-base64": "^3.5.2",
|
"js-base64": "^3.5.2",
|
||||||
"tailwindcss": "^3.0.23",
|
"tailwindcss": "^3.2.1",
|
||||||
"tatween": "^0.2.0",
|
"tatween": "^0.2.0",
|
||||||
"vue": "^3.0.0-rc.1"
|
"vue": "^3.2.41"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/compiler-sfc": "^3.0.0-rc.1",
|
"@googlemaps/js-api-loader": "^1.14.0",
|
||||||
"autoprefixer": "^10.2.6",
|
"@vue/compiler-sfc": "^3.2.41",
|
||||||
"postcss": "^8.1.1",
|
"@vueuse/head": "^0.9.8",
|
||||||
"postcss-cli": "^8.0.0",
|
"autoprefixer": "^10.4.12",
|
||||||
"vite": "^2.4.0"
|
"postcss": "^8.4.18",
|
||||||
|
"postcss-cli": "^10.0.0",
|
||||||
|
"vite": "^3.1.8",
|
||||||
|
"vite-ssg": "^0.21.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="md:flex flex-1 md:items-stretch md:flex-row">
|
<div class="md:flex flex-1 md:items-stretch md:flex-row">
|
||||||
<div class="h-[60%] md:h-full w-full">
|
<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>
|
||||||
<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="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">
|
<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 surface = ref(0);
|
||||||
const density = ref(1.5);
|
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) : ''
|
window.location.hash.substring(1) : ''
|
||||||
|
|
||||||
const mapComponent = ref();
|
const mapComponent = ref();
|
||||||
|
|
|
@ -6,12 +6,14 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Loader } from '@googlemaps/js-api-loader';
|
|
||||||
import { Base64 } from 'js-base64'
|
import { Base64 } from 'js-base64'
|
||||||
import { onMounted, ref, watch, computed } from 'vue';
|
import { onMounted, ref, watch, computed } from 'vue';
|
||||||
import { watchDebounced } from '@vueuse/core'
|
import { watchDebounced } from '@vueuse/core'
|
||||||
import { zlibSync, unzlibSync } from 'fflate';
|
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 DEFAULT_MAP_POSITION = [48.862895, 2.286978, 18]
|
||||||
|
|
||||||
const loader = new Loader({
|
const loader = new Loader({
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { createApp } from 'vue'
|
import { ViteSSG } from 'vite-ssg/single-page'
|
||||||
|
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import './index.css'
|
import './index.css'
|
||||||
|
|
||||||
createApp(App).mount('#app')
|
export const createApp = ViteSSG(App)
|
||||||
|
|
|
@ -13,6 +13,10 @@ export default defineConfig({
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
optimizeDeps: {
|
||||||
|
entries: ['@googlemaps/js-api-loader']
|
||||||
|
},
|
||||||
|
|
||||||
server: {
|
server: {
|
||||||
https: false,
|
https: false,
|
||||||
}
|
}
|
||||||
|
|
Ładowanie…
Reference in New Issue