diff --git a/docs/pt/reference/runtime-api.md b/docs/pt/reference/runtime-api.md new file mode 100644 index 00000000..f2b11f18 --- /dev/null +++ b/docs/pt/reference/runtime-api.md @@ -0,0 +1,165 @@ +# API em Tempo de Execução + +VitePress oferece várias APIs embutidas para permitir o acesso aos dados da aplicação. VitePress vem também com alguns componentes embutidos que podem ser usados globalmente. + +Os métodos auxiliares são importáveis globais de `vitepress` e geralmente são usados em componentes Vue de temas personalizados. No entanto, eles também podem ser usados dentro de páginas `.md` porque os arquivos markdown são compilados em [Componentes de Arquivo Único Vue (SFC)](https://vuejs.org/guide/scaling-up/sfc.html). + +Métodos que começam com `use*` indicam que é uma função da [API de Composição Vue 3](https://vuejs.org/guide/introduction.html#composition-api) ("Composable") que só pode ser usada dentro de `setup()` ou ` + + +``` + +## `useRoute` + +Retorna o objeto de rota atual com o seguinte tipo: + +```ts +interface Route { + path: string + data: PageData + component: Component | null +} +``` + +## `useRouter` + +Retorna a instância do roteador VitePress para que você possa navegar programaticamente para outra página. + +```ts +interface Router { + /** + * Rota atual. + */ + route: Route + /** + * Navegar para uma nova URL. + */ + go: (to?: string) => Promise + /** + * Chamado antes da mudança de rota. Retorne `false` para cancelar a navegação. + */ + onBeforeRouteChange?: (to: string) => Awaitable + /** + * Chamado antes do carregamento do componente da página (depois que o estado do histórico é + * atualizado). Retorne `false` para cancelar a navegação. + */ + onBeforePageLoad?: (to: string) => Awaitable + /** + * Chamado após a mudança de rota. + */ + onAfterRouteChanged?: (to: string) => Awaitable +} +``` + +## `withBase` + +- **Tipo**: `(path: string) => string` + +Anexa o [`base`](./site-config#base) configurado a um caminho de URL fornecido. Veja também [Base URL](../guide/asset-handling#base-url). + +## `` + +O componente `` exibe o conteúdo markdown renderizado. Útil [ao criar seu próprio tema](../guide/custom-theme). + +```vue + +``` + +## `` + +O componente `` revela seu _slot_ apenas no lado do cliente. + +Como as aplicações VitePress são interpretadas no lado do servidor em Node.js ao gerar builds estáticos, qualquer uso do Vue deve seguir os requisitos de código universal. Em resumo, certifique-se de acessar apenas APIs do Navegador / DOM em ganchos `beforeMount` ou `mounted`. + +Se você estiver usando ou demonstrando componentes que não são compatíveis com SSR (por exemplo, contêm diretivas personalizadas), você pode envolvê-los dentro do componente `ClientOnly`. + +```vue-html + + + +``` + +- Relacionado: [Compatibilidade SSR](../guide/ssr-compat) + +## `$frontmatter` + +Acesse diretamente os dados [frontmatter](../guide/frontmatter) da página atual em expressões Vue. + +```md +--- +title: Olá +--- + +# {{ $frontmatter.title }} +``` + +## `$params` + +Acesse diretamente os [parâmetros de rota dinâmica](../guide/routing#dynamic-routes) da página atual em expressões Vue. + +```md +- nome do pacote: {{ $params.pkg }} +- versão: {{ $params.version }} +```