Skip to content

Update Vue dependencies, tests, and documentation. Fix text interpolation in code blocks. #2430

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.

Sign up for GitHub

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

Merged
merged 7 commits into from
May 19, 2024
Merged

Update Vue dependencies, tests, and documentation. Fix text interpolation in code blocks. #2430

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0635591
Update Vue 3 depenency and docs. Remove Vue 2.
jhildenbiddle May 17, 2024
fc1ebee
Fix minor lint issue
jhildenbiddle May 17, 2024
8841c00
Remove Vue 2 reference
jhildenbiddle May 17, 2024
56dcbb3
Swap button positions
jhildenbiddle May 17, 2024
559a097
Update Vue2 links
jhildenbiddle May 17, 2024
b84e9fc
Send HTML with _blank to avoid quirks mode
jhildenbiddle May 17, 2024
a9f81f1
Support Vue text interpolation in code blocks
jhildenbiddle May 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/configuration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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 = {
Expand Down Expand Up @@ -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 = {
Expand Down
2 changes: 1 addition & 1 deletion docs/deploy.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down
10 changes: 8 additions & 2 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,13 @@
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-markdown.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-nginx.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-php.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
<!-- <script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script> -->

<!-- Vue: Development -->
<!-- <script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script> -->
<!-- <script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.runtime.global.js"></script> -->

<!-- Vue: Production -->
<script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<!-- <script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.runtime.global.prod.js"></script> -->
</body>
</html>
92 changes: 44 additions & 48 deletions docs/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
<!-- Production -->
<script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>

<!-- Development -->
<script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
```

#### 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
<!-- Production -->
Expand All @@ -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
<!-- Hide in docsify, show elsewhere (e.g. GitHub) -->
Expand All @@ -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
<div v-template>

```
{{ message}}
```

</div>
````

## Data

```js
{
Expand All @@ -74,23 +86,18 @@ Vue content becomes more interesting when [data](#data), [computed properties](#

<!-- Show message in docsify, hide elsewhere (e.g. GitHub) -->
<p v-text="message"></p>

<!-- Show message in docsify, show text elsewhere (e.g. GitHub) -->
<p v-text="message">Text for GitHub</p>
```
<!-- prettier-ignore-end -->

<output data-lang="output">

{{ message }}
<p>{{ message }}</p>

<p v-text="message"></p>
<p v-text="message">Text for GitHub</p>
</output>

[View output on GitHub](https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md#data)

### Computed properties
## Computed properties

```js
{
Expand Down Expand Up @@ -123,7 +130,7 @@ Good {{ timeOfDay }}!

</output>

### Methods
## Methods

```js
{
Expand All @@ -148,7 +155,7 @@ Good {{ timeOfDay }}!
<p><button @click="hello">Say Hello</button></p>
</output>

### Lifecycle Hooks
## Lifecycle Hooks

```js
{
Expand Down Expand Up @@ -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 = {
Expand All @@ -209,35 +216,35 @@ window.$docsify = {

```markdown
<p>
<button @click="count -= 1">-</button>
{{ count }}
<button @click="count += 1">+</button>
{{ count }}
<button @click="count -= 1">-</button>
</p>
```

<output data-lang="output">
<p>
<button @click="count -= 1">-</button>
{{ count }}
<button @click="count += 1">+</button>
{{ count }}
<button @click="count -= 1">-</button>
</p>
</output>

Notice the behavior when multiple global counters are rendered:

<output data-lang="output">
<p>
<button @click="count -= 1">-</button>
{{ count }}
<button @click="count += 1">+</button>
{{ count }}
<button @click="count -= 1">-</button>
</p>
</output>

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.

## 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 = {
Expand All @@ -255,21 +262,21 @@ window.$docsify = {

```markdown
<div id="counter">
<button @click="count -= 1">-</button>
{{ count }}
<button @click="count += 1">+</button>
{{ count }}
<button @click="count -= 1">-</button>
</div>
```

<output id="counter">
<button @click="count -= 1">-</button>
{{ count }}
<button @click="count += 1">+</button>
{{ count }}
<button @click="count -= 1">-</button>
</output>

## 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 = {
Expand Down Expand Up @@ -307,17 +314,6 @@ Vue content can mounted using a `<script>` tag in your markdown pages.
!> Only the first `<script>` tag in a markdown file is executed. If you wish to mount multiple Vue instances using a script tag, all instances must be mounted within the first script tag in your markdown.

```html
<!-- Vue 2.x -->
<script>
new Vue({
el: '#example',
// Options...
});
</script>
```

```html
<!-- Vue 3.x -->
<script>
Vue.createApp({
// Options...
Expand Down
Loading
Loading