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



  • 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>
    

  • Admin

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



  • 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



  • Those classes are purely presentation and can be safely removed.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.