Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 86dae61

Browse filesBrowse files
jhildenbiddlejhildenbiddle
committed
Rename vueOptions to vueMountOptions 
1 parent 1a52e97 commit 86dae61
Copy full SHA for 86dae61

5 files changed

+50-42Lines changed: 50 additions & 42 deletions

File tree

Expand file treeCollapse file tree
Open diff view settings
Filter options
Expand file treeCollapse file tree
Open diff view settings
Collapse file

‎docs/configuration.md‎

Copy file name to clipboardExpand all lines: docs/configuration.md
+3-3Lines changed: 3 additions & 3 deletions
  • Display the source diff
  • Display the rich diff
Original file line numberDiff line numberDiff line change
@@ -667,7 +667,7 @@ window.$docsify = {
667667

668668
- type: `Object`
669669

670-
Specifies Vue options to be shared throughout your site. These options will be used when Docsify detects Vue content in the main content area that has not been previously mounted via [vueOptions](#vueoptions), [vueComponents](#vuecomponents), or a markdown `<script>`.
670+
Specifies Vue options to be shared throughout your site. These options will be used when Docsify detects Vue content in the main content area that has not been previously mounted via [vueMountOptions](#vuemountoptions), [vueComponents](#vuecomponents), or a markdown `<script>`.
671671

672672
```js
673673
window.$docsify = {
@@ -697,15 +697,15 @@ window.$docsify = {
697697
</p>
698698
</output>
699699

700-
## vueOptions
700+
## vueMountOptions
701701

702702
- type: `Object`
703703

704704
Specifies Vue mount elements and their associated options. Mount elements are specified using a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key with an object containing Vue options as their value.
705705

706706
```js
707707
window.$docsify = {
708-
vueOptions: {
708+
vueMountOptions: {
709709
'#counter': {
710710
data() {
711711
return {
Collapse file

‎docs/index.html‎

Copy file name to clipboardExpand all lines: docs/index.html
+15-15Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,20 @@
101101
'/': 'Search',
102102
},
103103
},
104+
vueComponents: {
105+
'button-counter': {
106+
template: `
107+
<button @click="count += 1">
108+
You clicked me {{ count }} times
109+
</button>
110+
`,
111+
data() {
112+
return {
113+
count: 0,
114+
};
115+
},
116+
},
117+
},
104118
vueGlobalOptions: {
105119
data() {
106120
return {
@@ -134,7 +148,7 @@
134148
},
135149
},
136150
},
137-
vueOptions: {
151+
vueMountOptions: {
138152
'#counter': {
139153
data() {
140154
return {
@@ -143,20 +157,6 @@
143157
},
144158
},
145159
},
146-
vueComponents: {
147-
'button-counter': {
148-
template: `
149-
<button @click="count += 1">
150-
You clicked me {{ count }} times
151-
</button>
152-
`,
153-
data() {
154-
return {
155-
count: 0,
156-
};
157-
},
158-
},
159-
},
160160
plugins: [
161161
function(hook, vm) {
162162
hook.beforeEach(function(html) {
Collapse file

‎docs/vue.md‎

Copy file name to clipboardExpand all lines: docs/vue.md
+6-6Lines changed: 6 additions & 6 deletions
  • Display the source diff
  • Display the rich diff
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ Vue [template syntax](https://vuejs.org/v2/guide/syntax.html) is used to create
5353

5454
[View output on GitHub](https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md#template-syntax)
5555

56-
Vue content becomes more interesting when [data](#data), [computed properties](#computed-properties), [methods](#methods), and [lifecycle hooks](#lifecycle-hooks) are used. These options can be specified as [global options](#global-options), [instance options](#instance-options), or within [components](#components).
56+
Vue content becomes more interesting when [data](#data), [computed properties](#computed-properties), [methods](#methods), and [lifecycle hooks](#lifecycle-hooks) are used. These options can be specified as [global options](#global-options), [mount options](#mount-options), or within [components](#components).
5757

5858
### Data
5959

@@ -189,7 +189,7 @@ Good {{ timeOfDay }}!
189189

190190
## Global options
191191

192-
Use `vueGlobalOptions` to share Vue options throughout your site. These options will be used when Docsify detects Vue content in the main content area that has not been previously mounted via [instance options](#instance-options), [components](#components), or a [markdown script](#markdown-script).
192+
Use `vueGlobalOptions` to share Vue options throughout your site. These options will be used when Docsify detects Vue content in the main content area that has not been previously mounted via [mount options](#mount-options), [components](#components), or a [markdown script](#markdown-script).
193193

194194
```js
195195
window.$docsify = {
@@ -231,13 +231,13 @@ Notice the behavior when multiple global counters are rendered:
231231

232232
Changes made to one counter affect the both counters. This is because both instances reference the same global `count` value. Now, navigate to a new page and return to this section to see how changes made to global data persist between page loads.
233233

234-
## Instance options
234+
## Mount options
235235

236-
Use `vueOptions` to specify Vue mount elements and their associated options. Mount elements are specified using a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key with an object containing Vue options as their value. Docsify will mount the first matching element in the main content area (`#main, .markdown-section`) each time a new page is loaded.
236+
Use `vueMountOptions` to specify Vue mount elements and their associated options. Mount elements are specified using a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key with an object containing Vue options as their value. Docsify will mount the first matching element in the main content area (`#main, .markdown-section`) each time a new page is loaded.
237237

238238
```js
239239
window.$docsify = {
240-
vueOptions: {
240+
vueMountOptions: {
241241
'#counter': {
242242
data() {
243243
return {
@@ -325,7 +325,7 @@ Vue content can mounted using a `<script>` tag in your markdown pages.
325325

326326
- Docsify processes Vue content in the following order:
327327
1. Markdown `<script>`
328-
1. `vueOptions`
328+
1. `vueMountOptions`
329329
1. `vueGlobalOptions`
330330
- Docsify will not mount an existing Vue instance or an element that contains an existing Vue instance.
331331
- Docsify will automatically destroy/unmount all Vue instances it creates before new page content is loaded.
Collapse file

‎src/core/render/index.js‎

Copy file name to clipboardExpand all lines: src/core/render/index.js
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,9 +114,9 @@ function renderMain(html) {
114114
vueGlobalData = docsifyConfig.vueGlobalOptions.data();
115115
}
116116

117-
// vueOptions
117+
// vueMountOptions
118118
vueMountData.push(
119-
...Object.entries(docsifyConfig.vueOptions || {})
119+
...Object.entries(docsifyConfig.vueMountOptions || {})
120120
.map(([cssSelector, vueConfig]) => [
121121
dom.find(markdownElm, cssSelector),
122122
vueConfig,
Collapse file

‎test/e2e/vue.test.js‎

Copy file name to clipboardExpand all lines: test/e2e/vue.test.js
+24-16Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,12 @@ describe('Vue.js Compatibility', function() {
3030
};
3131
},
3232
},
33-
vueOptions: {
34-
'#vueoptions': {
33+
vueMountOptions: {
34+
'#vuemountoptions': {
3535
data: function() {
3636
return {
3737
counter: 0,
38-
msg: 'vueoptions',
38+
msg: 'vuemountoptions',
3939
};
4040
},
4141
},
@@ -53,7 +53,7 @@ describe('Vue.js Compatibility', function() {
5353
<span>{{ counter }}<span>
5454
</div>
5555
56-
<div id="vueoptions">
56+
<div id="vuemountoptions">
5757
<p v-text="msg">---</p>
5858
<button v-on:click="counter += 1">+</button>
5959
<span>{{ counter }}<span>
@@ -114,8 +114,11 @@ describe('Vue.js Compatibility', function() {
114114
'vueglobaloptions'
115115
);
116116
await expect(page).toEqualText('#vueglobaloptions span', '0');
117-
await expect(page).toEqualText('#vueoptions p', 'vueoptions');
118-
await expect(page).toEqualText('#vueoptions span', '0');
117+
await expect(page).toEqualText(
118+
'#vuemountoptions p',
119+
'vuemountoptions'
120+
);
121+
await expect(page).toEqualText('#vuemountoptions span', '0');
119122
await expect(page).toEqualText('#vuescript p', 'vuescript');
120123
await expect(page).toEqualText('#vuescript span', '0');
121124

@@ -124,8 +127,8 @@ describe('Vue.js Compatibility', function() {
124127
await expect(page).toEqualText('#vuecomponent', '1');
125128
await page.click('#vueglobaloptions button');
126129
await expect(page).toEqualText('#vueglobaloptions span', '1');
127-
await page.click('#vueoptions button');
128-
await expect(page).toEqualText('#vueoptions span', '1');
130+
await page.click('#vuemountoptions button');
131+
await expect(page).toEqualText('#vuemountoptions span', '1');
129132
await page.click('#vuescript button');
130133
await expect(page).toEqualText('#vuescript span', '1');
131134
});
@@ -141,23 +144,23 @@ describe('Vue.js Compatibility', function() {
141144
await expect(page).toEqualText('#vuefor', '{{ i }}');
142145
await expect(page).toEqualText('#vuecomponent', '---');
143146
await expect(page).toEqualText('#vueglobaloptions p', '---');
144-
await expect(page).toEqualText('#vueoptions p', '---');
147+
await expect(page).toEqualText('#vuemountoptions p', '---');
145148
await expect(page).toEqualText('#vuescript p', '---');
146149
});
147150

148-
test(`ignores content when vueComponents, vueOptions, and vueGlobalOptions are undefined`, async () => {
151+
test(`ignores content when vueComponents, vueMountOptions, and vueGlobalOptions are undefined`, async () => {
149152
const docsifyInitConfig = getSharedConfig();
150153

151154
docsifyInitConfig.config.vueComponents = undefined;
152155
docsifyInitConfig.config.vueGlobalOptions = undefined;
153-
docsifyInitConfig.config.vueOptions = undefined;
156+
docsifyInitConfig.config.vueMountOptions = undefined;
154157
docsifyInitConfig.scriptURLs = vueURL;
155158

156159
await docsifyInit(docsifyInitConfig);
157160
await expect(page).toEqualText('#vuefor', '{{ i }}');
158161
await expect(page).toEqualText('#vuecomponent', '---');
159162
await expect(page).toEqualText('#vueglobaloptions p', '---');
160-
await expect(page).toEqualText('#vueoptions p', '---');
163+
await expect(page).toEqualText('#vuemountoptions p', '---');
161164
await expect(page).toEqualText('#vuescript p', 'vuescript');
162165
});
163166

@@ -171,14 +174,16 @@ describe('Vue.js Compatibility', function() {
171174
await expect(page).toEqualText('#vuefor', '{{ i }}');
172175
await expect(page).toEqualText('#vuecomponent', '0');
173176
await expect(page).toEqualText('#vueglobaloptions p', '---');
174-
await expect(page).toEqualText('#vueoptions p', 'vueoptions');
177+
await expect(page).toEqualText('#vuemountoptions p', 'vuemountoptions');
175178
await expect(page).toEqualText('#vuescript p', 'vuescript');
176179
});
177180

178-
test(`ignores content when vueOptions is undefined`, async () => {
181+
test(`ignores content when vueMountOptions is undefined`, async () => {
179182
const docsifyInitConfig = getSharedConfig();
180183

181-
docsifyInitConfig.config.vueOptions['#vueoptions'] = undefined;
184+
docsifyInitConfig.config.vueMountOptions[
185+
'#vuemountoptions'
186+
] = undefined;
182187
docsifyInitConfig.scriptURLs = vueURL;
183188

184189
await docsifyInit(docsifyInitConfig);
@@ -188,7 +193,10 @@ describe('Vue.js Compatibility', function() {
188193
'#vueglobaloptions p',
189194
'vueglobaloptions'
190195
);
191-
await expect(page).toEqualText('#vueoptions p', 'vueglobaloptions');
196+
await expect(page).toEqualText(
197+
'#vuemountoptions p',
198+
'vueglobaloptions'
199+
);
192200
await expect(page).toEqualText('#vuescript p', 'vuescript');
193201
});
194202

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.