Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/egoist/vue-head
Document <head> manager for Vue 3, SSR ready.
https://github.com/egoist/vue-head
Last synced: about 2 months ago
JSON representation
Document <head> manager for Vue 3, SSR ready.
- Host: GitHub
- URL: https://github.com/egoist/vue-head
- Owner: egoist
- Archived: true
- Created: 2020-07-24T10:13:43.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-01-18T12:05:34.000Z (over 3 years ago)
- Last Synced: 2024-06-21T01:53:33.995Z (3 months ago)
- Language: TypeScript
- Homepage:
- Size: 462 KB
- Stars: 97
- Watchers: 6
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Use [@vueuse/head](https://github.com/vueuse/head) instead.
# @egoist/vue-head
[](https://npm.im/@egoist/vue-head) [](https://bundlephobia.com/result?p=@egoist/vue-head)
Document `` manager for Vue 3, SSR ready. (Experimental)
## Install
```bash
yarn add @egoist/vue-head
```
## Usage
Apply this plugin to your Vue instance:
```js
import { createApp } from 'vue'
import { createHead } from '@egoist/vue-head'
const app = createApp()
const head = createHead()
app.use(head)
```
Use the `` component to add tags to ``:
```vue
Hello Vue
import { Head } from '@egoist/vue-head'
export default {
components: {
Head,
},
}
```
## SSR Usage
On your server:
```js
import { createApp, h, Fragment } from 'vue'
import { renderToString } from '@vue/server-renderer'
const app = createApp()
const appHTML = await renderToString(app)
const headHTML = await renderToString(
h(Fragment, app.config.globalProperties.$head.headTags)
)
const finalHTML = `
${headHTML}
${appHTML}
`-ed to `document.head` element.
On the server-side, head tags are stored as a VNode array, so you can render them to HTML using `Vue.renderToString`.
## TODO
- Testing
- Support `bodyAttrs`, `htmlAttrs`
## Prior Art
Inspired by `react-head`.
## License
MIT © [EGOIST](https://github.com/egoist/vue-head)