No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How to remove the left area of a QLayout?

    Help
    drawer layout
    3
    17
    471
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • dobbel
      dobbel @wpq last edited by

      @wpq under /src/layouts

      1 Reply Last reply Reply Quote 0
      • W
        wpq last edited by wpq

        @dobbel : sorry, being new in Quasar, I do not exactly get your point.
        I do have MainLayout.vue in src/layouts but it is not used anywhere (it comes from the default skeleton).

        Is the mere fact that it exists a trigger for it being used somehow? (sorry if this is obvious, but I am a bit lost)

        dobbel 1 Reply Last reply Reply Quote 0
        • dobbel
          dobbel last edited by dobbel

          yes it is used. See:

          src/router/routes.js

          It is used because the default Quasar app is router enabled, and uses the MainLayout.

          1 Reply Last reply Reply Quote 0
          • W
            wpq last edited by wpq

            @dobbel

            This is routes.js (from the repo I mentioned earlier (https://gitlab.com/WoJ/testmarkdown/-/blob/master/src/router/routes.js)

            import Main from "layouts/Main"
            import RenderMD from "components/RenderMD"
            
            const routes = [
              {
                path: '/',
                component: Main,
              },
              {
                path: '/one',
                component: RenderMD,
                props: {
                  title: 'One',
                  hello: true,
                  filename: 'subdir/one.md'
                }
              },
              {
                path: '/two',
                component: RenderMD,
                props: {
                  title: 'Two',
                  hello: true,
                  filename: 'subdir/two.md'
                }
              },
            
              // Always leave this as last one,
              // but you can also remove it
              {
                path: '*',
                component: () => import('pages/Error404.vue')
              }
            ]
            
            export default routes
            

            Main.vue is almost empty:

            <template>
            <div>
             This is the main page
            </div>
            </template>
            
            <script>
                export default {
                    name: "Main"
                }
            </script>
            
            <style scoped>
            
            </style>
            
            
            1 Reply Last reply Reply Quote 0
            • dobbel
              dobbel @wpq last edited by

              @wpq I see you a right.

              dobbel 1 Reply Last reply Reply Quote 0
              • dobbel
                dobbel last edited by dobbel

                your git repo code does not run. Check it out and try…

                You removed the
                id="q-app"

                1 Reply Last reply Reply Quote 0
                • dobbel
                  dobbel @dobbel last edited by dobbel

                  @wpq you made a big mess 😉

                  the left drawer is in RenderMD.vue.

                  I changed your code and got a

                  • right drawer( and no left )
                  • correct working Layout
                  • correct App.vue
                  • correct routes.js ( childeren)

                  Do you want the code? You can than compare it to yours.

                  1 Reply Last reply Reply Quote 0
                  • W
                    wpq last edited by

                    @dobbel yes please 🙂

                    I guess I should follow the template instead of fiddling around 🙂

                    dobbel 1 Reply Last reply Reply Quote 0
                    • dobbel
                      dobbel @wpq last edited by dobbel

                      @wpq pm you with link

                      Yes you should try to first understand the default quasar app.

                      1 Reply Last reply Reply Quote 0
                      • W
                        wpq last edited by

                        @dobbel Thanks, I appreciate the help!

                        dobbel 1 Reply Last reply Reply Quote 0
                        • dobbel
                          dobbel @wpq last edited by

                          @wpq did you manage to fix it?

                          1 Reply Last reply Reply Quote 0
                          • W
                            wpq last edited by

                            @dobbel : yes, thanks. I actually restarted from the bootstrapped skeleton keeping the structure. It will help in future apps to be consistent.

                            1 Reply Last reply Reply Quote 0
                            • First post
                              Last post