Skip to content

consider support vue data through config globally #752

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wizicer opened this issue Jan 21, 2019 · 3 comments · Fixed by #1409
Closed

consider support vue data through config globally #752

wizicer opened this issue Jan 21, 2019 · 3 comments · Fixed by #1409
Assignees
Labels
enhancement vuejs related to Vue.js

Comments

@wizicer
Copy link

wizicer commented Jan 21, 2019

maybe we can change this line of code:

window.__EXECUTE_RESULT__ = new window.Vue().$mount('#main')

to include data from config file, code may like this:

      window.__EXECUTE_RESULT__ = new window.Vue({ data: this.config.vueData }).$mount('#main')
@timaschew
Copy link
Member

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?

@trusktr
Copy link
Member

trusktr commented Jun 21, 2020

I don't see vueOptions or vueData anywhere. 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 executeScript and new Vue calls 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.

@jhildenbiddle
Copy link
Member

jhildenbiddle commented Oct 7, 2020

@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 a data-page attribute, 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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement vuejs related to Vue.js
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants