Head and Meta Tags 🏷

îles will use site data such as title and description and combine them with page titles—specified in frontmatter—to set reasonable default values for commonly used meta tags.

There are several ways to customize title and meta tags in îles, powered by @vueuse/head.

useHead Composable

This helper can be used in the setup function or <script setup> of any Vue component.

<script setup lang="ts">
import { computed } from 'vue' 
const { frontmatter } = usePage()

  meta: [
    { property: 'og:type', content: 'website' },
    { property: 'keywords', content: computed(() => frontmatter.tags) },

Notice that values can be static or computed.

Composables are auto-imported
You don't need to import usePage, useRoute, useHead, or definePageComponent.

<Head> Component

Besides useHead, you can also manipulate head tags using the <Head> component:

    <title>Hello World</title>
    <meta property="author" :content="$site.author">
    <meta property="keywords" :content="$frontmatter.tags">
    <html lang="en-US" class="theme-dark" />

This is often more intuitive, specially for dynamic values.

App Meta Tags

Finally, you can use head in src/app.ts, which supports the same format as useHead.

import { defineApp } from 'iles'

export default defineApp({
  head: {
    htmlAttrs: { lang: 'en-US' },

If you need access to the site or page, you can provide a function instead:

import { defineApp } from 'iles'

export default defineApp({
  head ({ frontmatter, site }) {
    return {
      meta: [
        { property: 'author', content: site.author },
        { property: 'keywords', content: computed(() => frontmatter.tags) },

Last Updated: