feat: add playground main page

<template>

  <div class="main-wrapper">

    <div class="menu">

      <router-link to="/">Home</router-link>

      <router-link to="/marker">Marker</router-link>

    </div>

    <div class="map-wrapper">

      <router-view />

    </div>

  </div>

</template>

<script>

export default {

  components: {},

};

</script>

<style scoped>

.main-wrapper {

  display: flex;

}

.menu {

  display: flex;

  flex-direction: column;

}

.menu a {

  padding: 0.25rem 0.5rem;

  text-decoration: none;

  font-family: Arial, Helvetica, sans-serif;

}

.menu .router-link-exact-active {

  background-color: lightgray;

}

.map-wrapper {

  height: 50vh;

  width: 100%;

}

</style>

import { createApp } from "vue";

import { createRouter, createWebHistory } from "vue-router";

import App from "./App.vue";

import "leaflet/dist/leaflet.css";

import Home from "./views/Home.vue";

const routes = [

  { path: "/", component: Home },

  { path: "/marker", component: () => import("./views/Marker.vue") },

];

const router = createRouter({

  history: createWebHistory(),

  routes,

});

const app = createApp(App);

app.use(router);

app.mount("#app");