<Head> component

Powered by @vueuse/head, Vulmix allows to use the auto-imported <Head> component to set the page title or other head tag (like the favicon) directly from the template.

page/test-page.vue
<template>
  <div>
    <head>
      <title>My page</title>
    </head>

    <!-- Page content goes here -->
  </div>
</template>

So, using the example above, when we navigate to /test-page, we get the right title in the browser tab:

image

useHead composable

You can also use the auto-imported useHead composable to set the page title and meta tags from the script:

page/test-page.vue
<template>
  <div>
    <!-- Page content goes here -->
  </div>
</template>

<script setup>
  useHead({
    title: 'My Title',
  })
</script>

It is important to note that this in only intended to use as a visual tool, because it will only work during runtime, so you won't see the title and meta tags in the browser source code or in the search engine results. For that, you should use the head option in vulmix.config.ts, which will generate the <head> tags during build time.