How to remove the left area of a QLayout?
-
@wpq under /src/layouts
-
@dobbel : sorry, being new in Quasar, I do not exactly get your point.
I do haveMainLayout.vue
insrc/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)
-
yes it is used. See:
src/router/routes.js
It is used because the default Quasar app is router enabled, and uses the MainLayout.
-
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>
-
@wpq I see you a right.
-
your git repo code does not run. Check it out and try…
You removed the
id="q-app"
-
@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.
-
@dobbel yes please
I guess I should follow the template instead of fiddling around
-
@wpq pm you with link
Yes you should try to first understand the default quasar app.
-
@dobbel Thanks, I appreciate the help!
-
@wpq did you manage to fix it?
-
@dobbel : yes, thanks. I actually restarted from the bootstrapped skeleton keeping the structure. It will help in future apps to be consistent.