vuepress
vuepress copied to clipboard
vuejs
Ability to change root level components
Feature request
What problem does this feature solve?
Ability to change root level components.
What does the proposed API look like?
// import GlobalLayout from 'theme'?
const app = new Vue(
Object.assign(options, {
router,
render: h => h(GlobalLayout)
})
)
How should this be implemented in your opinion?
Move hardcoded components such as .global-ui into the GlobalLayout.vue component, this almost every aspect is manageable.
Are you willing to work on this yourself?
Being new to VuePress, if the proposed solution may work, then perhaps.
I'm very interested in this. Specifically, I'd like to add a <Transition> element that exists as a parent of the router element <GlobalLayout>. The GlobalLayout component is one layer too far down in the tree to be useful for this, and the devTemplate/SSRTemplate is one layer too high, if I understand correctly.
Yes, this feature is mostly so that I can have full control of the DOM. For example, achieve a structure like:
<div id="app" theme="dark">
<navbar />
<!-- <main> -->
<Content tag="main" />
<!-- </main> -->
</div>
Edit: and no, Content component does not let us change the tag or "content__default" class name 😠
@Axieum for your use case, I think the current implementation may already work. You should be able to modify your devTemplate and ssrTemplate to include a parent div of the Vue root (div#App), vary the class of that, and style according to whether the elements you’re working with are a descendant of that. Let me know if you’d like more specifics/explanation of what I mean.
None of what I just described, as far as I can tell, works for implementing a <Transition> Vue component as a parent of the router.
This feature would be interesting.
I write a documentation about a custom VueJS (v2) framework with Vuepress (version 1.7).
By default, the root element is the classic VueJs
I created a custom theme, but the result HTML contains two div with the id 'app' :
<body>
<div id="app">
<div id="app" data-app="true" class="v-application v-application--is-ltr theme--light" style="background: white;">
...
</div>
</div>
</body>
The first div without class come from Vuepress and the second with class come from the custom theme.
