VUE 2 Playground with Vuetify and Lodash

<!DOCTYPE html>
<html>

  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <link href="./lib/style.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" />
  </head>

  <body>
    <div id="app">
      <v-app>

        <v-navigation-drawer v-model="drawer" app>
          <router-link to="/">Home</router-link><br />
          <router-link to="/foo">Go to Foo</router-link><br />
          <router-link to="/bar">Go to Bar</router-link>
          <div v-for="entry in lakes" v-bind:key="entry.id" v-bind:hash="entry.id">
              {{ entry.lake }}
          </div>
        </v-navigation-drawer>

        <v-app-bar app>
          <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
          <v-toolbar-title>My Application</v-toolbar-title>
        </v-app-bar>

        <v-main>
          <router-view></router-view>
        </v-main>

      </v-app>
    </div>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
    <script src="./lib/script.js"></script>
  </body>

</html>

/* Add your styles here */

// Props to Router
// https://router.vuejs.org/guide/essentials/passing-props.html

const Home = { template: '<div>Home</div>' }
const Foo = { template: '<div>Foo</div>' }
const Bar = { template: '<div>Bar</div>' }

const routes = [
  { path: '/', component: Home },
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes
});

(async () => {
  let store = await fetch('./data.json');
  let data = await store.json();

  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    router,
    data: () => ({ 
      drawer: null, 
      content: data,
      lakes: _.uniqBy(data,'lake')
    }),
    methods: {

    }
  });
})();

[VueJS cookbook](https://vuejs.org/v2/cookbook/index.html)

[VueRouter documentation](https://router.vuejs.org/guide/)

[Vuetify documentation](https://vuetifyjs.com/en/getting-started/wireframes/)

[Lodash documentation](https://lodash.com/docs/)

[App template](https://plnkr.co/edit/jUiG5Z9MOtIlokgW)

[Local storage guide](https://blog.logrocket.com/the-complete-guide-to-using-localstorage-in-javascript-apps-ba44edb53a36/)

[
  {
    "id": "1",
    "lake": "Greifensee",
    "label": "8610 am See",
    "spotUrl": "https://goo.gl/maps/qoMpKjbM3au2hK1g7",
    "parkingUrl": "https://goo.gl/maps/B9f7kP94nisCJ6L3A",
    "rentUrl": "https://www.8610amsee.ch/ruderboote-boards/",
    "weatherUrl": "https://ch.wetter.com/schweiz/greifensee/CH0CH1585.html",
    "windyUrl": "https://www.windy.com/47.363/8.678?47.310,8.678,11",
    "coordN": 47.343607,
    "coordE": 8.690503,
    "description": "Herrlich gelegen am Nordost-Ufer des Greifensees bei Uster. Grosser Parkplatz vorhanden und man kann perfekt einwassern. Viele kleine Buchten Richtung Westen und ein traumhafter Sonnenuntergang. Im Restaurant 8610amSee wird mat super bewirtet und man kann dort auch SUPs (und Ruderboote) mieten.",
    "toilet": true,
    "food": true
  },
  {
    "id": "2",
    "lake": "Bodensee",
    "label": "",
    "spotUrl": "",
    "parkingUrl": "",
    "rentUrl": "",
    "weatherUrl": "",
    "windyUrl": "",
    "coordN": 0,
    "coordE": 0,
    "description": "",
    "toilet": false,
    "food": false
  },
  {
    "id": "3",
    "lake": "Greifensee",
    "label": "",
    "spotUrl": "",
    "parkingUrl": "",
    "rentUrl": "",
    "weatherUrl": "",
    "windyUrl": "",
    "coordN": 0,
    "coordE": 0,
    "description": "",
    "toilet": false,
    "food": false
  }
]