feat: Vue components, mount options, global options, and v3 support by jhildenbiddle · Pull Request #1409 · docsifyjs/docsify
Yes, I agree this description could use some work. To be honest, I debated about even adding it. I've updated the description to (hopefully) make it more clear. At the end of the day, this text exists to help explain why this edge case won't work:
window.$docsify = { vueGlobalOptions: { data() { return { globalMsg: 'Hello from vueGlobalOptions!', }; }, }, vueMounts: { '#test': { data() { return { mountMsg: 'Hello from vueMounts!' }; }, }, }, };
Example 1: This will work
<!-- Source --> <p>{{ globalMsg }}</p> <p id="test">{{ mountMsg }}</p>
<!-- Output --> <p>Hello from vueGlobalOptions!</p> <p id="test">Hello from vueMounts!</p>
In this example, docsify first mounts the top-level <p id="test"> from vueMounts. Docsify then iterates over the top-level child elements (<p>), skips the ones that contain or are themselves Vue instances, detects Vue template syntax in the top-level <p> element, and mounts it using vueGlobalOptions. Great.
Example 2: This will not work
<!-- Source --> <div> <p>{{ globalMsg }}</p> <p id="test">{{ mountMsg }}</p> </div>
<!-- Output --> <div> <p>{{ globalMsg }}</p> <p id="test">Hello from vueMounts!</p> </div>
Like the previous example, docsify first mounts the top-level <p id="test"> from vueMounts. Docsify then iterates over the top-level child elements (<div>), detects that <div> contains a Vue instance (<p id="test">) and skips that element. This behavior is explained in the following "Technical Notes" bullet point:
- Docsify will not mount an existing Vue instance or an element that contains an existing Vue instance.
I think it is highly unlikely that this will be an issue, but I added the related technical notes in hopes of making life easier for everyone if it does. The trick is how to do this succinctly without going into the same level of detail above. Hopefully the changes I've put in place are good enough for now. We can always revisit if/when needed.