schlunsen / Nuxt Leaflet
Licence: mit
Nuxt module for leafletjs - https://schlunsen.github.io/nuxt-leaflet/
Stars: ✭ 152
Projects that are alternatives of or similar to Nuxt Leaflet
Vue State Store
📮 VSS (Vue State Store) - Vue State Management (with Publish & Subscribe pattern)
Stars: ✭ 128 (-15.79%)
Mutual labels: nuxt
Recaptcha Module
🤖 Simple and easy Google reCAPTCHA integration with Nuxt.js
Stars: ✭ 143 (-5.92%)
Mutual labels: nuxt
Jellyfin Vue
A modern web client for Jellyfin based on Vue.
Stars: ✭ 129 (-15.13%)
Mutual labels: nuxt
Gustavo
👨 A (mostly) headless blogging platform built atop Nuxt & Gist.
Stars: ✭ 131 (-13.82%)
Mutual labels: nuxt
Prismic Module
Easily connect your Nuxt.js application to your content hosted on Prismic
Stars: ✭ 139 (-8.55%)
Mutual labels: nuxt
Guess Nuxt
Predict the next page (or pages) a user is likely to visit and prefetch these pages, improving perceived page load performance and user happiness. During the build process, the GuessPlugin will fetch report from Google Analytics, build a model used for predictive pre-fetching and add a small runtime to the main bundle of your application.
Stars: ✭ 126 (-17.11%)
Mutual labels: nuxt
Nuxt Image Loader Module
An image loader module for nuxt.js that allows you to configure image style derivatives.
Stars: ✭ 135 (-11.18%)
Mutual labels: nuxt
Nuxt Payload Extractor
Nuxt.js module that makes `nuxt generate` command to store html and payload separately.
Stars: ✭ 140 (-7.89%)
Mutual labels: nuxt
Pwa Template
PWA template for vue-cli based on the starter template
Stars: ✭ 131 (-13.82%)
Mutual labels: nuxt
Vue Soundcloud
🎧 A SoundCloud client built with Vue and Nuxt
Stars: ✭ 141 (-7.24%)
Mutual labels: nuxt
Nuxt Beginners Guide
Japan's first book that corresponds to Nuxt.js v2 and focuses on deep content.
Stars: ✭ 127 (-16.45%)
Mutual labels: nuxt
Nuxt Socket Io
Nuxt Socket IO - socket.io client and server module for Nuxt
Stars: ✭ 148 (-2.63%)
Mutual labels: nuxt
Nuxt Generate Cluster
Multi-threaded generator command for nuxt.js
Stars: ✭ 140 (-7.89%)
Mutual labels: nuxt
nuxt-leaflet
Nuxt module for leafletjs
Features
Nuxt module for vue2-leaflet.
See vue2-leaflet for more details.
Setup
- Add
nuxt-leaflet
dependency using yarn or npm to your project - Add
nuxt-leaflet
tomodules
section ofnuxt.config.js
{
modules: [
// Simple usage
'nuxt-leaflet',
// With options
['nuxt-leaflet', { /* module options */ }],
]
}
Usage
Add the map to your page
<div id="map-wrap" style="height: 100vh">
<client-only>
<l-map :zoom=13 :center="[55.9464418,8.1277591]">
<l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
<l-marker :lat-lng="[55.9464418,8.1277591]"></l-marker>
</l-map>
</client-only>
</div>
The Leaflet 'L' object can be found on vue component: this.$L
Typescript
If you're using TypeScript, you'll need to add nuxt-leaflet in your compilerOptions of your tsconfig.json :
{
"compilerOptions": {
"types": [
"@types/node",
"@nuxt/vue-app",
"nuxt-leaflet"
]
}
}
You'll then be able to have autocompletion in Vue instances (this.$L
).
List of currently implemented components
See components supported
Development
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
npm run dev
License
Copyright (c) Rasmus Schlunsen
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].