Nuxt Maplibre

MapLibreを使用するためのNuxtモジュール。 vue-maplibre-gl (MapLibreのVue 3ラッパーで、オリジナルのMapLibre APIをVueコンポーネントとして公開) を使用して作成されました。

このモジュールは、設定なしでNuxtで動作させることを目的としています。

機能

⚡ 設定不要
🦺 Typescriptサポート
🚠 自動インポート

クイックセットアップ

npx nuxi@latest module add nuxt-maplibre

これで完了です！NuxtアプリでMapLibreを使用できるようになりました✨

使用方法

利用可能なコンポーネントの完全なリストについては、vue-maplibre-glのドキュメントを参照してください。

基本

<template>
  <MglMap
    :map-style="style"
    :center="center"
    :zoom="zoom"
  >
    <MglNavigationControl />
  </MglMap>
</template>

<script setup>
const style = 'https://api.maptiler.com/maps/streets/style.json?key=cQX2iET1gmOW38bedbUh';
const center = [-1.559482, 47.21322];
const zoom = 8;
</script>

開発

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release