# Используем Vue в Markdown

# Ограничения доступа к API браузера

Поскольку приложение VuePress при серверном рендеринге использует Node.js, в том числе когда генерирует статическую сборку, то любое использование Vue должно соответствовать требованиям написания универсального кода. Вкратце, убедитесь что обращаетесь к API браузера / DOM только в хуках beforeMount или mounted.

Если вы используете компоненты, несовместимые с SSR (например, содержащие пользовательские директивы), можете обернуть их встроенным компонентом <ClientOnly>:

<ClientOnly>
  <NonSSRFriendlyComponent/>
</ClientOnly>

Обратите внимание, это не исправит компоненты или библиотеки, которые обращаются к API браузера при импорте — в случае использования кода, который предполагает окружение браузера при импорте, вам необходимо использовать динамические импорты в нужных хуках жизненного цикла:

<script>
export default {
  mounted () {
    import('./lib-that-access-window-on-import').then(module => {
      // использование кода
    })
  }
}
</script>

# Шаблонизация

# Интерполяции

Каждый файл markdown сначала компилируется в HTML и затем обрабатывается в качестве шаблона компонента Vue с помощью vue-loader. Это значит, что вы можете использовать интерполяции Vue в тексте:

Входные данные

{{ 1 + 1 }}

Результат

2

# Директивы

Директивы работают также:

Входные данные

<span v-for="i in 3">{{ i }} </span>

Результат

1 2 3 

# Доступ к данным сайта & страницы

У компилируемого компонента нет приватных данных, но имеет доступ к мета-данным сайта. Например:

Входные данные

{{ $page }}

Результат

{
  "path": "/using-vue.html",
  "title": "Используем Vue в Markdown",
  "frontmatter": {}
}

# Необработанный вывод данных

По умолчанию, вставки фрагментов кода оборачиваются с помощью v-pre. Если вы хотите отобразить оригинальное содержимое или Vue-специфичный синтаксис внутри блоков фрагментов кода или просто текст, вам необходимо обернуть параграф с помощью пользовательского контейнера v-pre:

Входные данные

::: v-pre
`{{ Это будет отображено как есть }}`
:::

Результат

# Использование компонентов

Любые файлы *.vue обнаруженные в каталоге .vuepress/components будут автоматически зарегистрированы как глобальные, асинхронные компоненты. Например:

.
└─ .vuepress
   └─ components
      ├─ demo-1.vue
      ├─ OtherComponent.vue
      └─ Foo
         └─ Bar.vue

Внутри любого markdown файла вы можете напрямую использовать компоненты (имя компонента определяется по имени файла):

<demo-1/>
<OtherComponent/>
<Foo-Bar/>

Hello this is <demo-1>

This is another component

Hello this is <Foo-Bar>

# Использование пре-процессоров

VuePress использует встроенную конфигурацию webpack для следующих пре-процессоров: sass, scss, less, stylus и pug. Всё что вам нужно сделать, это установить соответствующие зависимости. Например, для использования sass, установите в проект:

yarn add -D sass-loader node-sass

Теперь вы можете использовать синтаксис в файлах markdown и компонентах темы:

<style lang="sass">
.title
  font-size: 20px
</style>

Использование <template lang="pug"> требует установки pug и pug-plain-loader:

yarn add -D pug pug-plain-loader

# Использование Script & Style

Иногда вам может потребоваться применить JavaScript или CSS только к текущей странице. В таких случаях вы можете напрямую указать блоки <script> или <style> на корневом уровне файла markdown, и они будут извлечены из скомпилированного HTML и использованы в качестве секций <script> и <style> итогового однофайлового компонента Vue.

# Встроенные компоненты

# OutboundLink stable

Он() используется для обозначения внешней ссылки. Во VuePress этот компонент добавляется к каждой ссылке на сторонний ресурс.

# ClientOnly stable

Подробнее смотри Browser API Access Restrictions.

# Content beta

• Входные параметры:

  • custom - boolean

• Использование：

Скомпилированное содержимое текущего файла .md для отображения. Это может быть очень полезно при использовании пользовательского шаблона для отдельных страниц.

<Content/>

См. также:

• Пользовательские темы > Подстановка содержимого страницы

# Badge beta0.10.1+

• Входные параметры:

  • text - string
  • type - string, возможные значения: "tip"|"warn"|"error", по умолчанию "tip".
  • vertical - string, возможные значения: "top"|"middle", по умолчанию "top".

• Использование:

Вы можете использовать этот компонент после текста заголовка для добавления информационного статуса для некоторого API:

### Badge <Badge text="beta" type="warn"/> <Badge text="0.10.1+"/>