Repository navigation
consider support vue data through config globally #752
Description
Activity
We can also pass the whole object:
window.__EXECUTE_RESULT__ = new window.Vue(this.config.vueOptions).$mount('#main')
This should be even more flexible, right?
Reacted by Icer LiangI don't see
vueOptionsorvueDataanywhere. I'm assuming this is a feature request for a new option.Current
new window.Vue().$mount('#main')simply allows us to add some HTML like<div v-for="item in Array.from({length: 10})">into the page, but not much else. It is fairly useless without data (apart from the simple looping to make duplicating things easier).This feature could make some data re-usable across all pages within the HTML (f.e.
{{author}}anywhere to show an author name) while the following config:window.$docsify = { vueOptions: { author: 'Recking Wan' } }
Sidenote, The code in that conditional block is very bad. The
executeScriptandnew Vuecalls can execute scripts multiple times haphazardly.I have a pull request coming to fix this soon. The change can currently be seen here, though I will revise it and add unit tests.
@trusktr -- With #1271 now complete, adding the ability to pass data to Vue instances would be really helpful.
Keep in mind that if we have only one Vue configuration, then that configuration will be shared across all Vue instances that docsify auto-instantiates. We can allow for multiple Vue configurations, accessible using CSS selectors as keys, so that configurations can be applied to individual elements:
window.$docsify = { vueData: { // Pass this data to elements with id="my-container" '#my-container': { // ... }, // Pass this data to <my-component> elements 'my-component': { // ... }, // Pass to an element that does not match once of the above keys / selectors '*': { // ... } } }
Since docsify adds the current page name to the
<body>tag using adata-pageattribute, users can target page-specific elements as well:window.$docsify = { vueData: { // Pass this data to elements with id="my-container" on README.md 'body[data-page="README.md"] #my-container': { // ... }, // Pass this data to elements with id="my-container" on configuration.md 'body[data-page="configuration.md"] #my-container': { // ... }, } }
Thoughts?
- added a commit that references this issue
on Oct 10, 2020
maybe we can change this line of code:
docsify/src/core/render/index.js
Line 60 in 1a945d4
to include data from config file, code may like this: