vue-custom-head

isekaimaou1109
js
vue-custom-head JS library on GitHub vue-custom-head JS library on npm Download vue-custom-head JS library

This will simply generate <head> for each components.

Version 1.0.1 License ISC Vulnerabilities 0
vue-custom-head has no homepage
vue-custom-head JS library on GitHub
vue-custom-head JS library on npm
Download vue-custom-head JS library
Keywords
vue-helmethelmetvue-metavue-titlevue-head
INSTALL
Type:
Version:
<script type="module"> import vueCustomHead from 'https://cdn.jsdelivr.net/npm/vue-custom-head@1.0.1/+esm' </script>
Learn more
Readme Files Statistics Browse CDN

Introduction

This package is used to custom <head> in each Vue's components and was inspired by react-helmet. Of course you can use it as a plugin or a component.

Usage:

  • As a Component (Local Component)
<script>
import VueHelmet from 'vue-custom-head';
export default {
  name: 'ExampleComponent',
  components: {
    VueHelmet
  }
}
</script>

<template>
  <VueHelmet>
    <title>Example Title</title>
    <meta name="description" content="Hallo, Ich bin Toni">
  </VueHelmet>

  <p>Hello World</p>
</template>
  • As a Plugin (Global Environment)
/** In file main.js (version 3) */
import { VueProvider } from 'vue-custom-head'
import { createApp } from 'vue'

let app = createApp()
app.use(VueProvider)
app.mount("#app")

//===================================================

/** In file main.js (version 2) */
import { VueProvider } from 'vue-custom-head'
import Vue from 'vue'

Vue.use(VueProvider)
let app = new Vue()
app.mount("#app")

Hope you like this package and i'm very happy when this package can help you.