feat: add vitepress and basic docs

module.exports = {

  componentsRoot: "src/components",

  components: "**/[A-Z]*.vue",

  outDir: "./docs/components",

  defaultExamples: false,

  templates: {

    component: (renderedUsage, doc) => {

      const { displayName, description, docsBlocks, tags, functional } = doc;

      const { deprecated, author, since, version, see, link } = tags || {};

      return `

---

title: ${displayName}

---

# ${deprecated ? `~~${displayName}~~` : displayName}

${deprecated ? `> **Deprecated** ${deprecated[0].description}\n` : ""}

${description ? "> " + description : ""}

${functional ? renderedUsage.functionalTag : ""}

${author ? author.map((a) => `Author: ${a.description}\n`) : ""}

${since ? `Since: ${since[0].description}\n` : ""}

${version ? `Version: ${version[0].description}\n` : ""}

${see ? see.map((s) => `[See](${s.description})\n`) : ""}

${link ? link.map((l) => `[See](${l.description})\n`) : ""}

${docsBlocks ? "---\n" + docsBlocks.join("\n---\n") : ""}

${renderedUsage.props}

${renderedUsage.methods}

${renderedUsage.events}

${renderedUsage.slots}

`;

    },

  },

};

const path = require("path");

const fs = require("fs");

const componentsFolder = path.join(__dirname, "../components/");

const examplesFolder = path.join(__dirname, "../examples/");

const components = fs

  .readdirSync(componentsFolder)

  .filter((c) => c !== "index.md");

const examples = fs.readdirSync(examplesFolder).filter((c) => c !== "index.md");

module.exports = {

  title: "Vue Leaflet",

  description: "Documentations, API, and FAQ for vue leaflet",

  themeConfig: {

    sidebar: {

      "/components/": components,

      "/examples/": examples,

    },

    nav: [

      { text: "Intro", link: "/" },

      { text: "Quickstart", link: "/quickstart/" },

      //   { text: "Components", link: "/components/" },

      //   { text: "Examples", link: "/examples/" },

      //   { text: "FAQ", link: "/faq/" },

      { text: "Plugins", link: "/plugins/" },

    ],

  },

};

---

sidebarDepth: 2

---

# Introduction

Vue Leaflet is a wrapper library for the mapping library [leaflet](https://leafletjs.com)

To easily encapsulate most of the functionality of leaflet a series of composable vue-components are provided.

::: tip

Most of our components do not emit events

but **all** the components pass down listeners for leaflets events.

It's possible to bind to them by simply writing `@leafletEventName`

:::

## Base

- [l-map](/components/LMap.md)

## Shapes

- [l-circle](/components/LCircle.md)

- [l-polygon](/components/LPolygon.md)

- [l-polyline](/components/LPolyline.md)

- [l-rectangle](/components/LRectangle.md)

## Tiles

- [l-grid-layer](/components/LGridLayer.md)

- [l-tile-layer](/components/LTileLayer.md)

- [l-wms-tile-layer](/components/LWmsTileLayer.md)

## Markers

- [l-circle-marker](/components/LCircleMarker.md)

- [l-icon-default](/components/LIconDefault.md)

- [l-icon](/components/LIcon.md)

- [l-marker](/components/LMarker.md)

## Controls

- [l-control](/components/LControl.md)

- [l-control-attribution](/components/LControlAttribution.md)

- [l-control-layers](/components/LControlLayers.md)

- [l-control-scale](/components/LControlScale.md)

- [l-control-zoom](/components/LControlZoom.md)

## Info

- [l-popup](/components/LPopup.md)

- [l-tooltip](/components/LTooltip.md)

## Grouping

- [l-feature-group](/components/LFeatureGroup.md)

- [l-layer-group](/components/LLayerGroup.md)

## Other

- [l-geo-json](/components/LGeoJson.md)

- [l-image-overlay](/components/LImageOverlay.md)

---

sidebar: auto

---

# FAQ

## My map and/or markers don't fully render. What gives?

Depending on your project setup, you may have to try different solutions.

To fix map rendering issues, it may help to [import the Leaflet stylesheet within the **script** section of your Vue component](https://github.com/KoRiGaN/Vue Leaflet/issues/157#issuecomment-384307765).

In most cases, though, it is Webpack messing with Leaflet marker icons' paths, resulting in warnings or even errors. You can alleviate that by either [unsetting/replacing the default paths](https://github.com/KoRiGaN/Vue Leaflet/issues/96#issuecomment-341453050) ([alternate solution](https://github.com/Leaflet/Leaflet/issues/4968#issuecomment-319569682)) or [using Webpack aliases](https://github.com/Leaflet/Leaflet/issues/4849#issuecomment-307436996).

## How can I access the Leaflet map object?

First add a ref to the map

```html

<l-map ref="map" :zoom="13" :center="[47.413220, -1.219482]">

  ...

</l-map>

```

Then in you JavaScript you can use mapObject which is Leaflet map instance :

```javascript

this.$refs.map.mapObject;

```

**Note:** `mapObject` is not available directly in vue's `mounted` hook. You need to wrap the call to `this.$refs.map` in a `nextTick` call:

```javascript

data: () => ({map: null}),

mounted () {

  // DON'T

  this.map = this.$refs.map.mapObject // doesn't work, this.map is null

  // DO

  this.$nextTick(() => {

    this.map = this.$refs.map.mapObject // work as expected

  })

},

```

This also work for any other component (Marker, Polyline, etc...)

**Note:** If you're having troubles using `mounted` hook, you can use [l-map](/components/LMap.md) component `ready` event to ensure that you access `mapObject` after it's loaded:

```html

<l-map ref="map" @ready="doSomethingOnReady()"></l-map>

```

```javascript

methods: {

    doSomethingOnReady() {

        this.map = this.$refs.map.mapObject

    },

},

```

## How can I bind events of Vue Leaflet components?

All event binding can be done to event with the same name as in [leaflet documentation](http://leafletjs.com/reference-1.3.0.html).

For example if you want to listen to Vue Leaflet.LMarker move event.

```html

<l-marker :lat-lng="[47.413220, -1.219482]" @move="doSomething"></l-marker>

```

## Why am I getting weird errors for things that work fine in the demos?

There may be an issue with mismatching Leaflet versions ([see issue #281](https://github.com/KoRiGaN/Vue Leaflet/issues/281)) that, depending on the setup you have, could be causing problems. If you're using Nuxt.js, modify `nuxt.config.js` to include an alias for Leaflet in the webpack config.

```javascript

const path = require("path");

module.exports = {

  // other config properties go here...

  build: {

    extend(config, ctx) {

      config.resolve.alias["leaflet"] = path.join(

        __dirname,

        "node_modules/leaflet"

      );

    },

  },

};

```

## How to create a new plugin?

- vue2-leaflet exposes utilities that you can leverage findRealParent and propsBinder

- everything should be initialized in the mounted lifecycle hook

- remember to set leaflet as a peerDependency

- rollup is the best library bundler so you can leverage ESM ( you can check how we do it here in the main repo )

- check this repo or one of the other plugins for inspiration ( for example leaflet-markercluster )