Features Vue

{{ 1 + 1 }}

{{ new Date().toLocaleDateString() }}

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

<div v-if="$frontmatter.showBanner">
  Banner content
</div>

---
title: My Page
---

<script setup>
import { ref } from 'vue'
import MyComponent from './MyComponent.vue'

const count = ref(0)
</script>

# {{ $frontmatter.title }}

Count: {{ count }}

<button @click="count++">Increment</button>

<MyComponent />

<style module>
.button {
  color: red;
}
</style>

<script setup>
import CustomComponent from '../components/CustomComponent.vue'
</script>

<CustomComponent />

// .vitepress/theme/index.ts
import DefaultTheme from 'vitepress/theme'
import MyGlobalComponent from './MyGlobalComponent.vue'

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    app.component('MyGlobalComponent', MyGlobalComponent)
  }
}

<MyGlobalComponent />

<script setup>
import { useData, useRoute, useRouter } from 'vitepress'

const { page, frontmatter, theme, site } = useData()
const route = useRoute()
const router = useRouter()
</script>

Current page: {{ page.relativePath }}

# {{ $frontmatter.title }}

Params: {{ $params.id }}

# My Title <Badge type="tip" text="v2.0" />

<span v-pre>{{ will be displayed as-is }}</span>

::: v-pre
{{ this won't be processed }}
:::

```js-vue
Hello {{ 1 + 1 }}
```

npm install -D sass  # for .scss/.sass
npm install -D less  # for .less
npm install -D stylus # for .styl/.stylus

<style lang="scss">
.title {
  font-size: 20px;
}
</style>

<ClientOnly>
  <Teleport to="#modal">
    <div>Modal content</div>
  </Teleport>
</ClientOnly>

// tsconfig.json
{
  "include": ["docs/**/*.ts", "docs/**/*.vue", "docs/**/*.md"],
  "vueCompilerOptions": {
    "vitePressExtensions": [".md"]
  }
}

// .vscode/settings.json
{
  "vue.server.includeLanguages": ["vue", "markdown"]
}