Skip to content

Commit

Permalink
docs: use consistent indentation in examples (#19342)
Browse files Browse the repository at this point in the history
  • Loading branch information
shahabbasian committed Feb 28, 2023
1 parent 639189c commit 6009deb
Showing 1 changed file with 25 additions and 23 deletions.
48 changes: 25 additions & 23 deletions docs/1.getting-started/5.seo-meta.md
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ use the computed getter syntax, the same as `useHead`.
```vue{}[app.vue]
<script setup lang="ts">
const data = useFetch(() => $fetch('/api/example'))
useServerSeoMeta({
ogTitle: () => `${data.value?.title} - My Site`,
description: () => data.value?.description,
Expand Down Expand Up @@ -191,10 +192,11 @@ It's recommended to use computed getters (`() => {}`) over computed (`computed((
<script setup>
const desc = ref('My amazing site.')
</script>
<template>
<div>
<Meta name="description" :content="desc" />
</div>
<div>
<Meta name="description" :content="desc" />
</div>
</template>
```

Expand All @@ -212,11 +214,11 @@ If you want to use a function (for full control), then this cannot be set in you

```vue [useHead]
<script setup lang="ts">
useHead({
titleTemplate: (titleChunk) => {
return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
}
})
useHead({
titleTemplate: (titleChunk) => {
return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
}
})
</script>
```

Expand Down Expand Up @@ -282,17 +284,17 @@ In the example below, `titleTemplate` is set either as a string with the `%s` pl

```vue [app.vue]
<script setup>
useHead({
// as a string,
// where `%s` is replaced with the title
titleTemplate: '%s - Site Title',
// ... or as a function
titleTemplate: (productCategory) => {
return productCategory
? `${productCategory} - Site Title`
: 'Site Title'
}
})
useHead({
// as a string,
// where `%s` is replaced with the title
titleTemplate: '%s - Site Title',
// ... or as a function
titleTemplate: (productCategory) => {
return productCategory
? `${productCategory} - Site Title`
: 'Site Title'
}
})
</script>
```

Expand Down Expand Up @@ -324,10 +326,10 @@ The example below shows how you might enable Google Fonts using either the `link

```vue [Components]
<template>
<div>
<Link rel="preconnect" href="https://fonts.googleapis.com" />
<Link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" crossorigin="" />
</div>
<div>
<Link rel="preconnect" href="https://fonts.googleapis.com" />
<Link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" crossorigin="" />
</div>
</template>
```

Expand Down

0 comments on commit 6009deb

Please sign in to comment.