CODEWITHSUNDEEP
javascripthtmlvue.jsleaflet
MegaMilivoje
MegaMilivoje

Reputation: 1801

Vuejs 2.0 single file component, webpack and leaflet maps

I am using vuejs for a couple of weeks.

Right now, I am trying to implement leaflet maps. So I went to leaflet official site, and there they say I need to prepare my page:

The problem is that I do not have <head> section in my document because I use single file components like here:

<template>
    <div id="mymap">
    </div>
</template>

<style scoped type="text/css">
    #mymap {height: 180px;}
</style>

<script></script>

Where should I include this CSS file then?

Upvotes: 2

Views: 1383

Answers (2)

Bert
Bert

Reputation: 82439

Use @import in your style section to import the CSS.

<style type="text/css">
    @import "path/to/leaflet/dist/leaflet.css"

    #mymap {height: 180px;}
</style>

For the script, import the script.

<script>
     import Leaflet from 'leaflet'

     ...your code
</script>

FWIW, there is an HTML somewhere in your process and you can just add it there. Typically it's index.html or something similar.

Secondly I wouldn't import the CSS into the leaflet component you are trying to create; I would import it into your root component to prevent possibly importing the same CSS more than once. The library I linked in the comment takes this approach in their example application.

Upvotes: 2

botika
botika

Reputation: 503

If you are new to Vue I suppose you will be using some template with vue-cli to start. And it maked structure like this.

My recommendation is that you use Extract text Plugin and you create a global style file under src styles.css where to be able to import this kind of styles. Finally add this line in your main.js

import './styles.css'

Upvotes: 2

Related Questions