troxler / vue-headful Goto Github PK

View Code? Open in Web Editor NEW

228.0 8.0 17.0 143 KB

Set document title and meta tags with Vue.js

License: MIT License

JavaScript 100.00%

vuejs vue html head title metatags meta-tags seo sharing javascript

vue-headful's People

Contributors

Stargazers

Watchers

Forkers

verywow raiondesu habibtalib fengchangfight snayagar pamekar libin1991 mhsnasln stungkit starrkq melon-hsu roberthernandezarenas petermalak skyccpbx mrto1

vue-headful's Issues

Meta Info not Updated for Keep Alive components

When a component is wrapped in a keep-alive tag () the Meta Info for the page is not updated after the initial load, as the created hook is not being called.

Repro steps:

Create a vue app with a Vue Router
Create 2 routes
Make 1 of these routes keep-alive
Set a different Meta Title for each route
Start the app
Navigate to the Keep-Alive page. The title will be OK
Navigate to the regular page. The title will be OK
Go back to the Keep-Alive page. The title will NOT BE OK.

The title should be updated on focus/beforeEachRoute, not on created.

Document Browser Compatibility and Polyfills

Hey there, first let me just say that your plugin is really useful and it is easy to use.

I discovered a little nuisance today. IE11 is still a widely supported browser, especially in academia (I work for a company supporting academia :/ ). Use of vue-headful breaks the site with

Object doesn't support property or method 'assign'

You may want to look into using an ECMAScript 2015 (ES2015/ES6) Object.assign() polyfill and ponyfill for ECMAScript 5 environments to resolve this.

Bug: version 1.1.0 breaks if unless you set head and html props to empty object

As I stated in the title, the latest version breaks the package unless you explicitly set head and html props to empty objects. This is a result of the changes made to vue-headful.js in commit 77e11fa.

Error log from console:

Add prefix and suffix page

Hey, it is an idea. :)

meta tags are not showing in view page resource

problem setting og head properties

I cannot set various og head properties. The following meta values all get set apart from og:url and twitter,url

`
<vue-headful

  :title="title"

  :description="description"

  :keywords="keywords"

  :og:description="description"

  :og:url="url"

  :twitter.url="url"

/>
`

It doesn't matter what value I pass to og:url it remains empty. I have also tried ogUrl but still no joy. Any help appreciated.

meta tag is show in source code

i am developing vue + laravel website. i am developing front end with only pure vue. i want to set seo meta tags on vue component but this plugin is only set title not meta tags. it is show only on inspect but not showing on view source.

How can I solve error Could not find a declaration file for module 'vue-headful'?

The full error like this :

Could not find a declaration file for module 'vue-headful'. '/Users/chelsea/Documents/website/my-website/node_modules/vue-headful/dist/vue-headful.js' implicitly has an 'any' type.
Try npm install @types/vue-headful if it exists or add a new declaration (.d.ts) file containing declare module 'vue-headful';ts(7016)

I try to run npm install @types/vue-headful to solve this error, but there exist error 👍
npm ERR! code E404 npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fvue-headful - Not found npm ERR! 404 npm ERR! 404 '@types/vue-headful@latest' is not in the npm registry. npm ERR! 404 You should bug the author to publish it (or use the name yourself!) npm ERR! 404 npm ERR! 404 Note that you can also install from a npm ERR! 404 tarball, folder, http url, or git url.

How can I solve this problem?

Note :

I use vueitfy(Javascript). No typescript

How to set property with special characters

How can you set property og:title ?

Tried the following but apparently did not work (The tag is correctly added in my index.html):

:head="{
          'meta[og:title]': { 'og:title': 'FOO'},
      }"

Any tips when using this with vue-router?

I'm using vuex now. :)

how set meta description and keywords

i use instruction

import vueHeadful from 'vue-headful'

Vue.component('headful', vueHeadful)

in html

<headful description="Description from vue-headful" ></headful>

if set title - work!

how set meta description and keywords???

my index html

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href='/css/style.css'>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app">
        <headful description="Description from vue-headful" ></headful>
        <router-view></router-view>
    </div>
    <script src="/dist/build.js"></script>
  </body>
</html>

this example need result
<meta name="description" content="abcdefg">

When edit title on one view, title stays the same for every other pages

Hello,
When I use the vue-headful component on one page, if I go to this page and then switch to another page, the title stays the same as the one from the vue-headful component. Is this a normal behaviour ? Is there any way to prevent this ?
I would like the title to come back to it's original value (the one I set manualy in the index.html file)

Cannot get anything to work apart from title

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

Change all ALT

Why change all alt of page?