Do I need <main></main> in PWA App.vue

gtissington

I just spent a few hours trying to get mapboxgl into a Vue/Quasar component. I was having real trouble with the css and mapbox was not being displayed correctly.

I finally tracked it down to the <main></main> in PWA App.vue. If I remove this everything seems to work as expected. With it in the mapbox css is not working correctly.

So the questiosn are:
a) What is the purpose of ‘<main></main>’ in PWA App.vue. I don’t see any docs for this component and I don’t know what function it serves. Do I need it?

b) if I need it and keep it what would I need to do make it play nicely with mapboxgl css?

I admit my JS is strong but my css it weak.

Any help is very much appreciated.

e.g.

<template>
  <!-- Don't drop "q-app" class -->
  <div id="q-app">
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

and my map comp is

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

<script>
import mapboxgl from 'mapbox-gl'
function init () {
  mapboxgl.accessToken = 'pk.eyJ1IjoiZ3Rpc3Npbmd0b24iLCJhIjoiY2l1ZHAzZGVsMDBhNjJ0bDd2ZTNvMGUyMyJ9.j46Pwzizttx1vT5zvz1isA'

  var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/outdoors-v9', // stylesheet location
    center: [11.255, 43.77], // starting position
    zoom: 13 // starting zoom
  })

  map.addControl(new mapboxgl.FullscreenControl())
}

export default {
  name: 'map',
  mounted () {
    init()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
@import '~variables'

.hello
  margin-top 50px
  a
    color #35495E

ul
  list-style-type none
  padding 0

li
  display inline-block
  margin 0 10px

#map 
  position:absolute
  top:0
  bottom:0
  width:100%
  
</style>

rstoenescu

<main> is not a component, but a native HTML5 element.
It is not needed regardless if you’re building a PWA or not.

gtissington

Thanks for the quick response. I understand and will just go without it. Just a followup…

In the PWA template I can see that some css is applied to <MAIN/> Being a css N00b though I can’t quite understand what the effect would be.

In the context of Quasar PWA template what is the purpose <MAIN/> and the css defined for it?

Thanks

Garth

benoitranque

Those classes are purely presentation and can be safely removed.

No More Posting New Topics!

Do I need <main></main> in PWA App.vue