Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: @unhead/solid #472

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

feat: @unhead/solid #472

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4e10ee5
doc: tidy up
harlan-zw Jan 30, 2025
b22fc89
feat: @unhead/solid
harlan-zw Jan 30, 2025
3c32f69
doc: sync script doc
harlan-zw Feb 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 22 additions & 14 deletions docs/0.nuxt/guides/1.components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,35 @@
---
title: <Head> Component
description: Use the <Head> component to manage your head tags.
title: Components
description: Use component to manage your head tags.
navigation:
title: '<Head> Component'
title: 'Components'
---

The Unhead Vue package exports a `<Head>`{lang="html"} component that can be used to manage your head tags.
## Introduction

While it's recommended to use the `useHead` composable as it offers a more flexible API with full TypeScript support,
the `<Head>`{lang="html"} component may make more sense for your project.
Nuxt exports several Vue components that can be used to manage your head tags.

The component will takes any child elements that you would normally put in your actual `<head>`{lang="html"} and renders them
with Unhead.
While it's recommended to use the `useHead()`{lang="ts"} composable as it offers a more flexible API with full TypeScript support,
the Vue component may make more sense for your project.

## Usage

For full usage instructions please refer to the [Nuxt documentation](https://nuxt.com/docs/getting-started/seo-meta#components).

```vue
<script lang="ts" setup>
import { Head } from '@unhead/vue/components'
<script setup lang="ts">
const title = ref('Hello World')
</script>

<template>
<Head>
<title>My awesome site</title>
<meta name="description" content="My awesome site description">
</Head>
<div>
<Head>
<Title>{{ title }}</Title>
<Meta name="description" :content="title" />
<Style type="text/css" children="body { background-color: green; }" ></Style>
</Head>

<h1>{{ title }}</h1>
</div>
</template>
```
27 changes: 15 additions & 12 deletions docs/0.vue/1.installation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,19 +20,21 @@ Using [Nuxt](https://nuxt.com/docs/getting-started/seo-meta)? Unhead is already

### Demos

- [StackBlitz - Vite - Vue SPA](https://stackblitz.com/edit/vitejs-vite-uijgqa?file=package.json)
- [StackBlitz - Unhead - Vite + Vue SSR](https://stackblitz.com/edit/github-uesntxts)
- [StackBlitz - Unhead - Vue SPA](https://stackblitz.com/edit/github-uesntxts)

## Setup

### 1. Add Dependency

Install `@unhead/vue`{lang="bash"} dependency to your project:
Install `@unhead/vue`{lang="bash"} dependency to your project. The `next` tag is for v2 of Unhead.

:ModuleInstall{name="@unhead/vue"}
:ModuleInstall{name="@unhead/vue@next"}

#### Using Vue 2

In Unhead v2, official support for Vue 2 has been dropped. If you're using Vue 2, you will need to install v1 of `@unhead/vue@^1`{lang="bash"} instead.
In Unhead v2, official support for Vue 2 has been dropped. If you're using Vue 2, you will need to install v1 of `@unhead/vue@^1`{lang="bash"} instead
and follow the [v1 documentation](/docs/0.vue/1.installation-v1).

:ModuleInstall{name="@unhead/vue@^1"}

Expand Down Expand Up @@ -87,26 +89,25 @@ export async function render(_url: string) {
Next we'll update our template `index.html`{lang="bash"} file. We'll be removing any head tags that should be dynamic
and replacing them with placeholders.

```html {1,3,5,7} [./index.html]
```html {1,3,5,7} [index.html]
<!DOCTYPE html>
<html <!--htmlAttrs--> >
<html>
<head>
<!--headTags-->
<!--preload-links-->
<!--app-head-->
</head>
<body <!--bodyAttrs--> >
<!--bodyTagsOpen-->
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/src/entry-client.js"></script>
<!--bodyTags-->
</body>
</html>
```

Now we need to render out the head tags _after_ vue has rendered the app and replace these
placeholders with the actual head tags.

To start with we need to modify the `render` function to return the template data.
To start with we need to modify the `render` function to return the template data. Make
sure you add the `renderSSRHead` import.

```ts {1,14-15} [src/entry-server.ts]
import { createHead, renderSSRHead } from '@unhead/vue/server'
Expand Down Expand Up @@ -140,7 +141,9 @@ export async function createServer(
// ...
const [appHtml, templateData] = await render(url, manifest)
// replace placeholders
let html = template.replace('<!--app-html-->', appHtml)
let html = template
.replace('<!--app-html-->', appHtml)

Object.entries(templateData).forEach(([key, value]) => {
html = html.replace(`<!--${key}-->`{lang="html"}, value)
})
Expand Down
10 changes: 8 additions & 2 deletions docs/0.vue/guides/1.components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,16 @@ navigation:
title: '<Head> Component'
---

## Introduction

The Unhead Vue package exports a `<Head>`{lang="html"} component that can be used to manage your head tags.

While it's recommended to use the `useHead` composable as it offers a more flexible API with full TypeScript support,
While it's recommended to use the `useHead()`{lang="ts"} composable as it offers a more flexible API with full TypeScript support,
the `<Head>`{lang="html"} component may make more sense for your project.

The component will takes any child elements that you would normally put in your actual `<head>`{lang="html"} and renders them
## Usage

The component will takes any child elements that you would normally put in your actual `<head>`{lang="html"} and renders them
with Unhead.

```vue
Expand All @@ -25,3 +29,5 @@ import { Head } from '@unhead/vue/components'
</Head>
</template>
```

When the head component is unmounted, it will remove all the tags that were added.
33 changes: 0 additions & 33 deletions docs/scripts/0.introduction.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,36 +62,3 @@ Source: [HTTP Archive's Web Almanac](https://almanac.httparchive.org/en/2023/per
- [Add Types to Scripts →](/unhead/scripts/typed-scripts)
- [Control Loading →](/unhead/scripts/load-triggers)
- [Handle Errors →](/unhead/scripts/load-failures)

---

title: Introduction to Unhead
description: Manage page metadata for modern JavaScript applications
navigation:
title: Introduction
---

## What is head manager?

Unhead is built for modern JavaScript applications that need to render code outside their `<div id="app"></div>`{lang="html"} entry in both a
server-rendered and client-rendered environment.

JavaScript applications need different metadata for each page or view. Without proper management, applications encounter several issues:

Pages show incorrect titles and descriptions during navigation. Social media previews display wrong information. Search engines receive duplicate or conflicting meta tags. Server-rendered pages break when JavaScript takes over in the browser.

These issues affect SEO, social sharing, and user experience. They become more significant in server-rendered applications where metadata must work correctly during the initial page load and subsequent JavaScript updates.

```html
<!DOCTYPE html>
<html> <!-- ? htmlAttrs -->
<head>
<!-- ? head -->
</head>
<body> <!-- Unhead: bodyAttrs -->
<!-- Unhead: bodyOpen -->
<div id="app"></div> <!-- Your app -->
<!-- Unhead: bodyClose -->
</body>
</html>
```
156 changes: 7 additions & 149 deletions docs/scripts/0.nuxt/1.installation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,165 +1,23 @@
---
title: Installing Unhead with Vue
description: Learn how to start using Unhead with Vue.
title: 'Install Unhead Scripts on Nuxt Projects'
description: 'Get started with Unhead Scripts by installing the dependency to your project.'
navigation:
title: 'Installation'
---

## Introduction

Unhead is the official head management library for Vue. It provides a simple and intuitive API for managing the head of your application, including the title, meta tags, and other elements that are important for SEO and user experience.
To use Unhead Scripts with Nuxt, you need to install the Nuxt Scripts module.

## Setup

1. Install `@unhead/vue` dependency to your project:

::code-group

```bash [yarn]
yarn add @unhead/vue
```

```bash [npm]
npm install @unhead/vue
```

```bash [pnpm]
pnpm add @unhead/vue
```

::

If you're using Vue 2, you will need to install v1 of `@unhead/vue` instead.

::code-group

```bash [yarn]
yarn add @unhead/vue@^1
```

```bash [npm]
npm install @unhead/vue@^1
```

```bash [pnpm]
pnpm add @unhead/vue@^1
```

::

### Demos

- [StackBlitz - Vite - Vue SPA](https://stackblitz.com/edit/vitejs-vite-uijgqa?file=package.json)

2. Register the Vue plugin:

```ts [Vue 3]
import { createHead } from '@unhead/vue'
import { createApp } from 'vue'

const app = createApp()

const head = createHead()
app.use(head)

app.mount('#app')
```

```ts [Vue 2]
// You must use v1 of Unhead for Vue 2 support
import { createHead } from '@unhead/vue'
import { UnheadPlugin } from '@unhead/vue/vue2'
import Vue from 'vue'

const head = createHead()
Vue.use(UnheadPlugin)
```

::

3. Done! Now you can use the `useHead` composable to manage your head.

::code-group

```vue [useHead]
<script setup lang=ts>
import { useHead } from '@unhead/vue'

useHead({
title: 'My awesome site'
})
</script>
```

```vue [Options API]
<script>
export default {
head: {
title: 'My awesome site'
}
}
</script>
```

::

## Optional: Auto-Imports

Unhead provides out-of-the-box configuration for [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import).

```ts [vite.config.ts]
import { unheadVueComposablesImports } from '@unhead/vue'

export default defineConfig({
plugins: [
AutoImport({
imports: [
unheadVueComposablesImports,
],
}),
]
})
```

## Optional: Vue 3 Options API

The options API functionality is only provided out-of-the-box for Vue 2, if you'd like to use in Vue 3 you will need to install the mixin.

```ts
import { createHead, VueHeadMixin } from '@unhead/vue'
import { createApp } from 'vue'

const app = createApp()
const head = createHead()
app.mixin(VueHeadMixin)
// ...
```

This key can either be a function or a plain object or reactive data. See [Reactivity](/setup/vue/how-it-works) for more details.

```vue
<script>
export default {
head() {
return {
title: 'Hello World'
}
}
}
</script>

<template>
<div>
<h1>Hello World</h1>
</div>
</template>
```
Please follow the [installation documentation](https://scripts.nuxt.com/) to get started.

## Next Steps

Your Vue app is now setup for head management, congrats! 🎉
Your Nuxt app is now serving basic Scripts, congrats! 🎉

Try next:

1. Optional: [Setup SSR](/setup/ssr/installation)
2. Explore the [Composables](/usage/composables/use-head)
1. Add some [recipes](/addons/recipes)
2. Consider using the [Vite plugin](/addons/vite-plugin)
Loading