v-maplibre
Guide

Getting Started

Get started with v-maplibre in your Vue 3 or Nuxt project

Installation

Install the package and its peer dependency:

pnpm add @geoql/v-maplibre maplibre-gl

Import Styles

Import the required CSS files in your main application file or component:

// main.ts or app.vue
import 'maplibre-gl/dist/maplibre-gl.css';
import '@geoql/v-maplibre/dist/v-maplibre.css';

Basic Usage

Here's a simple example to render a map:

<script setup lang="ts">
  import { VMap } from '@geoql/v-maplibre';
  import 'maplibre-gl/dist/maplibre-gl.css';
  import '@geoql/v-maplibre/dist/v-maplibre.css';

  const mapOptions = {
    style: 'https://demotiles.maplibre.org/style.json',
    center: [-74.5, 40],
    zoom: 9,
  };
</script>

<template>
  <VMap :options="mapOptions" style="height: 500px"></VMap>
</template>

Nuxt Usage

For Nuxt applications, you need to configure the component to only render on the client side:

<script setup lang="ts">
  import { VMap } from '@geoql/v-maplibre';

  const mapOptions = {
    style: 'https://demotiles.maplibre.org/style.json',
    center: [-74.5, 40],
    zoom: 9,
  };
</script>

<template>
  <ClientOnly>
    <VMap :options="mapOptions" style="height: 500px"></VMap>
  </ClientOnly>
</template>

Nuxt Global CSS (Recommended)

Add the styles to your nuxt.config.ts for global availability:

// nuxt.config.ts
export default defineNuxtConfig({
  css: [
    'maplibre-gl/dist/maplibre-gl.css',
    '@geoql/v-maplibre/dist/v-maplibre.css',
  ],
});

Or use a Nuxt plugin:

// plugins/maplibre.client.ts
import 'maplibre-gl/dist/maplibre-gl.css';
import '@geoql/v-maplibre/dist/v-maplibre.css';

export default defineNuxtPlugin(() => {
  // Plugin loaded
});

Next Steps

Examples

Practical examples for using v-maplibre components