troxler / vue-headful Goto Github PK
View Code? Open in Web Editor NEWSet document title and meta tags with Vue.js
License: MIT License
Set document title and meta tags with Vue.js
License: MIT License
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.
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.
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.
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)
I'm using vuex now. :)
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'},
}"
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:
The title should be updated on focus/beforeEachRoute, not on created.
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">
Hey, it is an idea. :)
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 :
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.
Why change all alt of page?
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.