Initial vue template files

src/App.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import 'leaflet/dist/leaflet.css'
+import { LMap, LTileLayer } from '@vue-leaflet/vue-leaflet'
+import { ref } from 'vue'
+
+const zoom = ref(6)
+const center = ref([38, 139.69])
+</script>
+
+<template>
+  <main>
+    <LMap ref="map" v-model:zoom="zoom" v-model:center="center" :useGlobalLeaflet="false">
+      <LTileLayer
+        url="https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png"
+        layer-type="base"
+        name="Stadia Maps Basemap"
+      />
+    </LMap>
+  </main>
+</template>
+
+<style scoped>
+main {
+  height: 100vh;
+  width: 100vw;
+}
+</style>

src/assets/main.css

@@ -0,0 +1,7 @@
+@import 'tailwindcss';
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}

src/main.ts

@@ -0,0 +1,14 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import '@/assets/main.css'
+
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')

src/router/index.ts

@@ -0,0 +1,8 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [],
+})
+
+export default router

src/stores/counter.ts

@@ -0,0 +1,12 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})