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.


      <!-- Don't drop "q-app" class -->
      <div id="q-app">

    and my map comp is

        <div id="map"></div>
    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 () {
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style lang="stylus" scoped>
    @import '~variables'
      margin-top 50px
        color #35495E
      list-style-type none
      padding 0
      display inline-block
      margin 0 10px

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



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

Log in to reply