Unverified Commit 5c836b3c authored by Nicolò Maria Mezzopera's avatar Nicolò Maria Mezzopera Committed by GitHub
Browse files

Merge pull request #60 from vue-leaflet/new-playground 

New playground with vue-router
parents 2a1a2a71 0ccf89fd

package.json

+3 −1
Original line number Diff line number Diff line
@@ -18,6 +18,7 @@ 
  },

  "scripts": {

    "serve": "vue-cli-service serve ./src/playground.js",

    "playground": "vue-cli-service serve ./src/playground/index.js",

    "build": "rollup -c rollup.config.js",

    "lint": "vue-cli-service lint",

    "prepublishOnly": "npm run lint && npm run build",
@@ -48,7 +49,8 @@ 
    "rollup-plugin-commonjs": "^10.1.0",

    "rollup-plugin-vue": "^6.0.0-beta.11",

    "vitepress": "^0.6.0",

    "vue": "^3.0.0"

    "vue": "^3.0.0",

    "vue-router": "^4.0.0-rc.5"

  },

  "husky": {

    "hooks": {

src/playground/App.vue

0 → 100644
+40 −0
Original line number Diff line number Diff line 
<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: 75vh;

  width: 100%;

}

</style>

src/playground/index.js

0 → 100644
+21 −0
Original line number Diff line number Diff line 
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");

src/playground/views/Home.vue

0 → 100644
+26 −0
Original line number Diff line number Diff line 
<template>

  <l-map ref="map" v-model:zoom="zoom" :center="[47.41322, -1.219482]">

    <l-tile-layer

      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

      layer-type="base"

      name="OpenStreetMap"

    ></l-tile-layer>

  </l-map>

</template>

<script>

import { LMap, LTileLayer } from "./../../components";



export default {

  components: {

    LMap,

    LTileLayer,

  },

  data() {

    return {

      zoom: 2,

    };

  },

};

</script>



<style></style>

src/playground/views/Marker.vue

0 → 100644
+29 −0
Original line number Diff line number Diff line 
<template>

  <l-map ref="map" v-model:zoom="zoom" :center="[47.41322, -1.219482]">

    <l-tile-layer

      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

      layer-type="base"

      name="OpenStreetMap"

    ></l-tile-layer>



    <l-marker :lat-lng="[50, 50]" draggable> </l-marker>

  </l-map>

</template>

<script>

import { LMap, LTileLayer, LMarker } from "./../../components";



export default {

  components: {

    LMap,

    LTileLayer,

    LMarker,

  },

  data() {

    return {

      zoom: 2,

    };

  },

};

</script>



<style></style>