Installation

Compatibility 0.0.1

Vue Maplibre can run on browsers that support last 2 versions.

If you really need to support outdated browsers, please add Babel and Polyfill yourself.

Since Vue 3 no longer supports IE11, Vue Maplibre does not support IE either.

version
Chrome
Edge
Firefox
Safari
0.0.1 +Chrome ≥ 85Edge ≥ 85Firefox ≥ 79Safari ≥ 14.1

Version

Vue Maplibre is currently in a rapid development iteration.

Using Package Manager

We recommend using the package manager (NPM, Yarn, pnpm) to install Vue Maplibre, so that you can utilize bundlers like Vite and webpack.

# Choose a package manager you like.

# NPM
$ npm install @meteosci/vue-maplibre --save

# Yarn
$ yarn add @meteosci/vue-maplibre

# pnpm
$ pnpm install @meteosci/vue-maplibre

If your network environment is not good, it is recommended to use a mirror registry cnpm or Alibaba.

Import in Browser

Import Vue Maplibre through browser HTML tags directly, and use global variable VueMaplibre.

According to different CDN providers, there are different introduction methods. Here we use unpkg and jsDelivr as example. You can also use other CDN providers.

unpkg 

<head>
  <!-- Import style -->
  <link rel="stylesheet" href="//unpkg.com/@meteosci/vue-maplibre/dist/index.css" />
  <!-- Import Vue 3 -->
  <script src="//unpkg.com/vue@3"></script>
  <!-- Import component library -->
  <script src="//unpkg.com/@meteosci/vue-maplibre"></script>
</head>

jsDelivr 

<head>
  <!-- Import style -->
  <link
    rel="stylesheet"
    href="//cdn.jsdelivr.net/npm/@meteosci/vue-maplibre/dist/index.css"
  />
  <!-- Import Vue 3 -->
  <script src="//cdn.jsdelivr.net/npm/vue@3"></script>
  <!-- Import component library -->
  <script src="//cdn.jsdelivr.net/npm/@meteosci/vue-maplibre"></script>
</head>

TIP

We recommend using CDN to import Vue Maplibre users to lock the version on the link address, so as not to be affected by incompatible updates when Vue Maplibre is upgraded in the future. Please check unpkg.com for the method to lock the version.

Hello World

With CDN, we can easily use Vue Maplibre to write a Hello World page. Online Demo

If you are installing via package manager and want to use it with a packaging tool, please read the next section: Quick Start.