Skip to content

Minor doc grammar and addtl info links #116

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 5 commits into from
Apr 18, 2018
Merged

Minor doc grammar and addtl info links #116

Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a0a89f0
Minor doc grammar and addtl info links
slathrop Apr 18, 2018
23b0fdc
Minor grammar fix in docs
slathrop Apr 18, 2018
48ea2eb
Fix spacing/typo btwn new doc links
slathrop Apr 18, 2018
fed1454
Merge remote-tracking branch 'upstream/master'
slathrop Apr 18, 2018
cd28724
Docs tweak/revert import details
slathrop Apr 18, 2018
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
10 changes: 5 additions & 5 deletions docs/guide/using-vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@

Because VuePress applications are server-rendered in Node.js when generating static builds, any Vue usage must conform to the [universal code requirements](https://ssr.vuejs.org/en/universal.html). In short, make sure to only access Browser / DOM APIs in `beforeMounted` or `mounted` hooks.

If you are using or demoing a component that is not SSR friendly (for example containing custom directives), you can wrap them inside the built-in `<ClientOnly>` component:
If you are using or demoing components that are not SSR friendly (for example containing custom directives), you can wrap them inside the built-in `<ClientOnly>` component:

``` md
<ClientOnly>
<NonSSRFriendlyComponent/>
</ClientOnly>
```

Note this does not fix components or libraries that access Browser APIs **on import** - in order to use code that assumes a browser environment on import, you need to dynamically import them in proper lifecycle hooks:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd leave this sentence as-is because you can do this in either beforeMount or mounted.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure. Changed.

Note this does not fix components or libraries that access Browser APIs **on import** - in order to use code that assumes a browser environment on import, you need to perform a dynamic import in the proper lifecycle hook:

``` vue
<script>
Expand Down Expand Up @@ -58,7 +58,7 @@ Directives also work:

### Access to Site & Page Data

The compiled component does not have any private data but do have access to the [site metadata](./custom-themes.md#site-and-page-metadata). For example:
The compiled component does not have any private data but does have access to the [site metadata](./custom-themes.md#site-and-page-metadata). For example:

**Input**

Expand Down Expand Up @@ -96,7 +96,7 @@ By default, fenced code blocks are automatically wrapped with `v-pre`. If you wa

## Using Components

Any `*.vue` file found in `.vuepress/components` are automatically registered as global async components. For example:
Any `*.vue` files found in `.vuepress/components` are automatically registered as [global](https://vuejs.org/v2/guide/components-registration.html#Global-Registration), [async](https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components) components. For example:

```
.
Expand All @@ -118,7 +118,7 @@ Inside any markdown file you can then directly use the components (names are inf
<OtherComponent/>

::: warning IMPORTANT
Make sure a custom component's names either contains a hyphen or is in PascalCase. Otherwise it will be treated as an inline element and wrapped inside a `<p>` tag, which will lead to hydration mismatch because `<p>` does not allow block elements to be placed inside it.
Make sure a custom component's name either contains a hyphen or is in PascalCase. Otherwise it will be treated as an inline element and wrapped inside a `<p>` tag, which will lead to hydration mismatch because `<p>` does not allow block elements to be placed inside it.
:::

## Script & Style Hoisting
Expand Down