Cannot get anything to work apart from title

graemedewe commented 6 years ago

Hi, I have literally copied and pasted the sample config from here and the only field that I can get this to update is the page title. Specifically I am wanting to get the favicon to work but never see any other items in the head get changed. Does favicon work ? Thanks

troxler commented 6 years ago

It sounds like you did not prepare the HTML accordingly. Did you read the documentation about that?

Note that neither Headful nor vue-headful add missing HTML elements, they only add attribute values. So it is important that you add everything that you want to have populated in your HTML first. For example, to specify the title and description you have to prepare the HTML as follows.
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta itemprop="name">
    <meta property="og:title">
    <meta name="twitter:title">
    <meta name="description"/>
    <meta itemprop="description">
    <meta property="og:description">
    <meta name="twitter:description">
</head>
<body>

</body>
</html>

The title works even without that as it just uses the document.title API which populates the required element if it is not in the DOM yet.

Does favicon work ?

Neither headful nor vue-headful have built-in support for the favicon but only for the preview image. For the favicon it is usually enough to just name it favicon.ico and place it in the root of your website. If you want to define it using vue-headful, you can use the following code (please make sure that <link rel="icon"> is in your DOM).

<vue-headful
    :head="{
        'link[rel="icon"]': {href: 'favicon.ico'}
    }"
/>

Does it work now? If not, please create a minimal example of your code that does not work.

graemedewe commented 6 years ago

Hi, no cant get it to work. I've set it up as follows

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="/dist/main.css">
    <link rel="icon" type="image/x-icon" class="js-site-favicon" href="" id="favicon">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>

<noscript>
    Sorry but Javascript is required if you'd like to use this website, please ensure it's enabled
</noscript>
</body>
</html>

component.vue

<template>
    <div>
        <vue-headful
                :title="headful.title"
                :lang="headful.lang"
                :head="{
                    '#favicon': {href: 'https://avatars3.githubusercontent.com/u/26734308?s=200&v=4'}
                }"
        />
    </div>
</template>
........

    data() {
      return {
        headful: {
          title: 'Site Title',
          lang: 'en-GB',
          image: 'https://avatars3.githubusercontent.com/u/26734308?s=200&v=4',
          head: { '#favicon' : { href : 'https://avatars3.githubusercontent.com/u/26734308?s=200&v=4' }}
        }
      }
    },
    methods() {
      setHtmlHeader() {
        let siteConfig = this.$store.getters.getConfig;
        this.headful.title = siteConfig.meta.siteTitle;
        this.headful.lang = this.$store.getters.getLocale;
        this.headful.image = siteConfig.meta.favicon;
        this.headful.head={
           '#favicon': {href: 'https://avatars3.githubusercontent.com/u/26734308?s=200&v=4'}
        }
      }
   }

even this doesnt load the hard coded favicon

troxler commented 6 years ago

Can you setup a repository with a simple but complete example so that I can reproduce the issue?

troxler commented 6 years ago

Closing due to inactivity.

troxler / vue-headful

Cannot get anything to work apart from title #6