diff --git a/docs/configuration.md b/docs/configuration.md index 6004636c3..ec08530a2 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -956,7 +956,7 @@ window.$docsify = { - Type: `Object` -Creates and registers global [Vue components](https://vuejs.org/v2/guide/components.html). Components are specified using the component name as the key with an object containing Vue options as the value. Component `data` is unique for each instance and will not persist as users navigate the site. +Creates and registers global [Vue](https://vuejs.org/guide/essentials/component-basics.html). Components are specified using the component name as the key with an object containing Vue options as the value. Component `data` is unique for each instance and will not persist as users navigate the site. ```js window.$docsify = { @@ -989,7 +989,7 @@ window.$docsify = { - Type: `Object` -Specifies [Vue options](https://vuejs.org/v2/api/#Options-Data) for use with Vue content not explicitly mounted with [vueMounts](#mounting-dom-elements), [vueComponents](#components), or a [markdown script](#markdown-script). Changes to global `data` will persist and be reflected anywhere global references are used. +Specifies global Vue options for use with Vue content not explicitly mounted with [vueMounts](#mounting-dom-elements), [vueComponents](#components), or a [markdown script](#markdown-script). Changes to global `data` will persist and be reflected anywhere global references are used. ```js window.$docsify = { @@ -1023,7 +1023,7 @@ window.$docsify = { - Type: `Object` -Specifies DOM elements to mount as [Vue instances](https://vuejs.org/v2/guide/instance.html) 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 each time a new page is loaded. Mount element `data` is unique for each instance and will not persist as users navigate the site. +Specifies DOM elements to mount as Vue instances 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 each time a new page is loaded. Mount element `data` is unique for each instance and will not persist as users navigate the site. ```js window.$docsify = { diff --git a/docs/deploy.md b/docs/deploy.md index 4e1651d9a..4bcb6d997 100644 --- a/docs/deploy.md +++ b/docs/deploy.md @@ -141,7 +141,7 @@ frontend: 2. Using the user interface, import your docsify project from one of the three supported Git providers (GitHub, GitLab, or Bitbucket). 3. Navigate to the project’s production environment in Stormkit or create a new environment if needed. 4. Verify the build command in your Stormkit configuration. By default, Stormkit CI will run `npm run build` but you can specify a custom build command on this page. -5. Set output folder to `docs` +5. Set output folder to `docs` 6. Click the “Deploy Now” button to deploy your site. Read more in the [Stormkit Documentation](https://stormkit.io/docs). diff --git a/docs/index.html b/docs/index.html index 0a7f78140..25d7c707d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -224,7 +224,13 @@ - - + + + + + + + + diff --git a/docs/vue.md b/docs/vue.md index 57a760127..a9b5b3be1 100644 --- a/docs/vue.md +++ b/docs/vue.md @@ -1,20 +1,12 @@ # Vue compatibility -Docsify allows Vue content to be added directly to your markdown pages. This can greatly simplify working with data and adding reactivity to your site. +Docsify allows [Vue.js](https://vuejs.org) content to be added directly to your markdown pages. This can greatly simplify working with data and adding reactivity to your site. -To get started, add Vue [2.x](https://vuejs.org) or [3.x](https://v3.vuejs.org) to your `index.html` file. Choose the production version for your live site or the development version for helpful console warnings and [Vue.js devtools](https://github.com/vuejs/vue-devtools) support. +Vue [template syntax](https://vuejs.org/guide/essentials/template-syntax) can be used to add dynamic content to your pages. 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) or within DOM [mounts](#mounts) and [components](#components). -#### Vue 2.x +## Setup -```html - - - - - -``` - -#### Vue 3.x +To get started, add Vue.js to your `index.html` file. Choose the production version for your live site or the development version for helpful console warnings and [Vue.js devtools](https://github.com/vuejs/vue-devtools) support. ```html @@ -26,7 +18,7 @@ To get started, add Vue [2.x](https://vuejs.org) or [3.x](https://v3.vuejs.org) ## Template syntax -Vue [template syntax](https://vuejs.org/v2/guide/syntax.html) is used to create dynamic content. With no additional configuration, this syntax offers several useful features like support for [JavaScript expressions](https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions) and Vue [directives](https://vuejs.org/v2/guide/syntax.html#Directives) for loops and conditional rendering. +Vue [template syntax](https://vuejs.org/guide/essentials/template-syntax) offers several useful features like support for [JavaScript expressions](https://vuejs.org/guide/essentials/template-syntax.html#using-javascript-expressions) and Vue [directives](https://vuejs.org/guide/essentials/template-syntax.html#directives) for loops and conditional rendering. ```markdown @@ -53,9 +45,29 @@ Vue [template syntax](https://vuejs.org/v2/guide/syntax.html) is used to create [View output on GitHub](https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md#template-syntax) -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) or within DOM [mounts](#mounts) and [components](#components). +## Code Blocks -### Data +Docsify ignores Vue template syntax within code blocks by default: + +````markdown +``` +{{ message}} +``` +```` + +To process Vue template syntax within a code block, wrap the code block in an element with a `v-template` attribute: + +````markdown +
+ +``` +{{ message}} +``` + +
+```` + +## Data ```js { @@ -74,23 +86,18 @@ Vue content becomes more interesting when [data](#data), [computed properties](#

- - -

Text for GitHub

``` - -{{ message }} +

{{ message }}

-

Text for GitHub

 [View output on GitHub](https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md#data) -### Computed properties +## Computed properties ```js { @@ -123,7 +130,7 @@ Good {{ timeOfDay }}! -### Methods +## Methods ```js { @@ -148,7 +155,7 @@ Good {{ timeOfDay }}!

-### Lifecycle Hooks +## Lifecycle Hooks ```js { @@ -193,7 +200,7 @@ Good {{ timeOfDay }}! ## Global options -Use `vueGlobalOptions` to specify [Vue options](https://vuejs.org/v2/api/#Options-Data) for use with Vue content not explicitly mounted with [vueMounts](#mounts), [vueComponents](#components), or a [markdown script](#markdown-script). Changes to global `data` will persist and be reflected anywhere global references are used. +Use `vueGlobalOptions` to specify global Vue options for use with Vue content not explicitly mounted with [vueMounts](#mounts), [vueComponents](#components), or a [markdown script](#markdown-script). Changes to global `data` will persist and be reflected anywhere global references are used. ```js window.$docsify = { @@ -209,17 +216,17 @@ window.$docsify = { ```markdown

- - {{ count }} + {{ count }} +

```

- - {{ count }} + {{ count }} +

@@ -227,9 +234,9 @@ Notice the behavior when multiple global counters are rendered:

- - {{ count }} + {{ count }} +

@@ -237,7 +244,7 @@ Changes made to one counter affect the both counters. This is because both insta ## Mounts -Use `vueMounts` to specify DOM elements to mount as [Vue instances](https://vuejs.org/v2/guide/instance.html) 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 each time a new page is loaded. Mount element `data` is unique for each instance and will not persist as users navigate the site. +Use `vueMounts` to specify DOM elements to mount as Vue instances 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 each time a new page is loaded. Mount element `data` is unique for each instance and will not persist as users navigate the site. ```js window.$docsify = { @@ -255,21 +262,21 @@ window.$docsify = { ```markdown
- - {{ count }} + {{ count }} +
``` - - {{ count }} + {{ count }} + ## Components -Use `vueComponents` to create and register global [Vue components](https://vuejs.org/v2/guide/components.html). Components are specified using the component name as the key with an object containing Vue options as the value. Component `data` is unique for each instance and will not persist as users navigate the site. +Use `vueComponents` to create and register global [Vue components](https://vuejs.org/guide/essentials/component-basics.html). Components are specified using the component name as the key with an object containing Vue options as the value. Component `data` is unique for each instance and will not persist as users navigate the site. ```js window.$docsify = { @@ -307,17 +314,6 @@ Vue content can mounted using a ` -``` - -```html - `, }, @@ -91,126 +82,113 @@ test.describe('Vue.js Compatibility', () => { } // Tests - // --------------------------------------------------------------------------- - for (const vueURL of vueURLs) { - const vueVersion = Number(vueURL.match(/vue(\d+)/)[1]); // 2|3 - - test.describe(`Vue v${vueVersion}`, () => { - test(`Parse templates and render content when import Vue v${vueVersion} resources`, async ({ - page, - }) => { - const docsifyInitConfig = { - config: {}, - markdown: { - homepage: stripIndent` + // ---------------------------------------------------------------------------- + test(`Parse templates and render content when import Vue resources`, async ({ + page, + }) => { + const docsifyInitConfig = { + config: {}, + markdown: { + homepage: stripIndent`
{{ i }}
`, - }, - }; - - docsifyInitConfig.scriptURLs = vueURL; - - await docsifyInit(docsifyInitConfig); - await expect(page.locator('#vuefor')).toHaveText('12345'); - }); - for (const executeScript of [true, undefined]) { - test(`renders content when executeScript is ${executeScript}`, async ({ - page, - }) => { - const docsifyInitConfig = getSharedConfig(); - - docsifyInitConfig.config.executeScript = executeScript; - docsifyInitConfig.scriptURLs = vueURL; - - await docsifyInit(docsifyInitConfig); - - // Static - await expect(page.locator('#vuefor')).toHaveText('12345'); - await expect(page.locator('#vuecomponent')).toHaveText('0'); - await expect(page.locator('#vueglobaloptions p')).toHaveText( - 'vueglobaloptions' - ); - await expect(page.locator('#vueglobaloptions > span')).toHaveText( - '0' - ); - await expect(page.locator('#vuemounts p')).toHaveText('vuemounts'); - await expect(page.locator('#vuemounts > span')).toHaveText('0'); - await expect(page.locator('#vuescript p')).toHaveText('vuescript'); - await expect(page.locator('#vuescript > span')).toHaveText('0'); - - // Reactive - await page.click('#vuecomponent'); - await expect(page.locator('#vuecomponent')).toHaveText('1'); - await page.click('#vueglobaloptions button'); - await expect(page.locator('#vueglobaloptions > span')).toHaveText( - '1' - ); - await page.click('#vuemounts button'); - await expect(page.locator('#vuemounts > span')).toHaveText('1'); - await page.click('#vuescript button'); - await expect(page.locator('#vuescript > span')).toHaveText('1'); - }); - } - - test(`ignores content when Vue is not present`, async ({ page }) => { - const docsifyInitConfig = getSharedConfig(); - - await docsifyInit(docsifyInitConfig); - await page.evaluate(() => 'Vue' in window === false); - await expect(page.locator('#vuefor')).toHaveText('{{ i }}'); - await expect(page.locator('#vuecomponent')).toHaveText('---'); - await expect(page.locator('#vueglobaloptions p')).toHaveText('---'); - await expect(page.locator('#vuemounts p')).toHaveText('---'); - await expect(page.locator('#vuescript p')).toHaveText('---'); - }); - - test(`ignores content when vueGlobalOptions is undefined`, async ({ - page, - }) => { - const docsifyInitConfig = getSharedConfig(); - - docsifyInitConfig.config.vueGlobalOptions = undefined; - docsifyInitConfig.scriptURLs = vueURL; - - await docsifyInit(docsifyInitConfig); - await expect(page.locator('#vuefor')).toHaveText('12345'); - await expect(page.locator('#vuecomponent')).toHaveText('0'); - await expect(page.locator('#vuecomponent')).toHaveText('0'); - // eslint-disable-next-line playwright/prefer-web-first-assertions - expect(await page.locator('#vueglobaloptions p').innerText()).toBe(''); - await expect(page.locator('#vuemounts p')).toHaveText('vuemounts'); - await expect(page.locator('#vuescript p')).toHaveText('vuescript'); - }); - - test(`ignores content when vueMounts is undefined`, async ({ page }) => { - const docsifyInitConfig = getSharedConfig(); - - docsifyInitConfig.config.vueMounts['#vuemounts'] = undefined; - docsifyInitConfig.scriptURLs = vueURL; - - await docsifyInit(docsifyInitConfig); - await expect(page.locator('#vuefor')).toHaveText('12345'); - await expect(page.locator('#vuecomponent')).toHaveText('0'); - await expect(page.locator('#vueglobaloptions p')).toHaveText( - 'vueglobaloptions' - ); - await expect(page.locator('#vuemounts p')).toHaveText( - 'vueglobaloptions' - ); - await expect(page.locator('#vuescript p')).toHaveText('vuescript'); - }); - - test(`ignores