Nuxt 4
在 Nuxt 4 中注册 @movk/mapbox 模块，配置 token，组件与 composables 自动导入。
注册模块
在 nuxt.config.ts 中注册模块并配置 token：
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@movk/mapbox'],
mapbox: {
accessToken: process.env.NUXT_MAPBOX_TOKEN,
tiandituToken: process.env.NUXT_TIANDITU_TOKEN
}
})
token 写入
runtimeConfig.public.mapbox，组件在客户端创建地图时读取。建议用环境变量注入，不要硬编码。配套 .env：
.env
NUXT_MAPBOX_TOKEN=pk.your_mapbox_access_token
NUXT_TIANDITU_TOKEN=your_tianditu_tk
模块选项
| 选项 | 说明 |
|---|---|
accessToken | Mapbox access token |
tiandituToken | 天地图服务 tk（使用 MapboxTiandituLayer 时需要） |
prefix | 组件前缀，默认 Mapbox |
开始使用
组件与 composables 自动导入，开箱即用。地图实例只在客户端 onMounted 创建，组件已做 SSR 安全处理，无需 <ClientOnly> 包裹：
app.vue
<script setup lang="ts">
const center = ref<[number, number]>([116.397, 39.908])
const zoom = ref(9)
</script>
<template>
<MapboxMap
v-model:center="center"
v-model:zoom="zoom"
:options="{ style: 'mapbox://styles/mapbox/streets-v12' }"
>
<MapboxLayer
layer-id="points"
type="circle"
:source="{ type: 'geojson', data: '/points.geojson' }"
:paint="{ 'circle-radius': 8, 'circle-color': '#e11d48' }"
/>
<MapboxNavigationControl position="top-right" />
</MapboxMap>
</template>
MapboxMap 容器为 width:100%; height:100%，请确保父级有明确高度，否则地图不可见。