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
    470
    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.
    • W
      wpq last edited by

      @dobbel : where is MainLayout.vue used in the router?

      I did modify App.vue to use it as the main component (instead of delegating further) - I will revert to the default if needed but I do not see where MainLayout.vue is used.

      dobbel 1 Reply Last reply Reply Quote 0
      • 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