I'm using Vue Social Share package I'm getting only one warning in lighthouse "Links are not crawlable". Please guide how I can fix this issue. Following is my code
<ShareNetwork v-for="network in networks"
:network="network.network"
v-on:click="saveInfo()"
:url="sharing.url"
:title="post.title"
#open="open(network.network)"
>
<i :class="network.icon"></i>
<span>{{ network.name }}</span>
</ShareNetwork>
//method
async open(network = 'no network') {
await this.$axios.post('/social-shares', {
post_title: this.post.title,
network,
})
},
Inspected code looks as follows
steps to reproduce this issue
clone the project from this link
Install dependencies
run lighthouse SEO to see this issue of Links are not crawlable
Related
H1 not displaying "Welcome to Vue" it sill displays {{tile}}
<div id="myApp">
<h1>{{title}}</h1>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
el : '#myApp' ,
data : {
title : 'Welcome to Vue'
},
});
Please try the below code in addition to what Dan mentioned in his answer
new Vue({
template: `<h1>{{ title }}</h1>`,
data() {
return {
title : 'Welcome to Vue'
};
}
}).$mount("#myApp");
That Unpkg link is for Vue 3 but your code is Vue 2 code. If you don't specify a version number with Unpkg, it will give you the latest version.
The official Vue docs presented that unversioned Unpkg link for years before only very recently fixing it. Maybe that's where you found it. Anyone using that link had any existing apps broken when Vue 3 released. (I had hundreds of demos using it!)
I'd suggest using Cloudflare:
Vue 2:
https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.7/vue.min.js
Vue 3:
https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.prod.min.js
I am trying to use the Masonry plugin with Bootstrap5 and NuxtJS. When I follow the example here
https://getbootstrap.com/docs/5.0/examples/masonry/ and incorporate it into my own codesandbox, I notice that my demo is not in the correct masonry format. See the gaps? My sandbox
My example:
Bootstrap's example:
What do I need to do to get my demo into format shown on the Bootstrap Masonry example page?
I checked how to load the script from a CDN either globally or locally. It was working but at one condition: you needed to NOT start on the masonry page.
Meaning that if you loaded the app on a specific page, then moved to the one with the masonry it was working. But not if you started on this specific page. So, a pretty subpar solution.
This article was really helpful to understand how to wait until the CDN script is fully loaded: https://vueschool.io/articles/vuejs-tutorials/how-to-load-third-party-scripts-in-nuxt-js/
Then I realized that we are far better installing it directly as an NPM dependency. Therefore, I proceeded to the masonry repo. Found a great message on how to setup the whole thing in Nuxt.
And after a removal of some useless stuff and some modern dynamic import, here we are
<template>
<main>
<h1>Bootstrap and Masonry</h1>
<div class="row" id="masonry">
<!-- ... -->
</main>
</template>
<script>
export default {
async mounted() {
if (process.browser) {
let { default: Masonry } = await import('masonry-layout')
new Masonry('#masonry', { percentPosition: true })
}
},
}
</script>
The final solution is looking pretty well and there is not a lot of code. On top of that, the code is properly loaded. And you can load it on a click or any other event.
I am trying to use my first Headless CMS and I've tried both Prismic.io and Contentful.
For instance, this is the code from Contentful guide:
asyncData({ env }) {
return Promise.all([
// fetch the owner of the blog
client.getEntries({
'sys.id': env.CTF_PERSON_ID
}),
// fetch all blog posts sorted by creation date
client.getEntries({
content_type: env.CTF_BLOG_POST_TYPE_ID,
order: '-sys.createdAt'
})
])
.then(([entries, posts]) => {
// return data that should be available
// in the template
return {
person: entries.items[0],
posts: posts.items
}
})
.catch(console.error)
}
This works fine and I am able to fetch my blog posts in
<article v-for="post in posts" :key="post">
<h2>{{ post.fields.title }}</h2>
<p>{{ post.fields.content }}</p>
</article>
However, if I generate static pages with Nuxt, I understood the page will still load the latest version of the content from Contentful when live, while instead it just keeps the static content fetched on the pages when generated.
Am I missing the main point here?
Thanks
What you discovered is correct. Nuxt in its current version makes requests to the contentful API when new navigations occur. Afaik there are plans to write the data to disk during build time (e.g. Gatsby does it like that) but these are not implemented yet.
Personally, I'm running my private blog on exactly this tech stack and there is a small time window where static pages and the dynamically loaded part are different. This wasn't a bit problem for me so far. I can understand though that this could cause troubles.
I am running Meteor release METEOR#1.4.2.3
I recently installed a social media share package via Atmosphere.
meteor add ellisonleao:sharerjs.
You can also read more about it # http://www.ellison.rocks/sharer.js/
My template looks like this:
Template.detail.events({
"click .sharer": function() {
//add new buttons with share behaviour
$('.postedImagesWell').append(<button class="sharer button" data-sharer="facebook" data-url="https://ellisonleao.github.io/sharer.js/">Share on Facebook</button>);
window.Sharer.init();
}
});
Find below the template in code:
<template name="detail">
<div class="postedImagesWell">
<img class = "img-responsive img-rounded postedImages" id = "trial" src="{{this.photo.url}}" alt="thumbnail" >
</template>
when I run click on the Share on Facebook link. I see this error message in my browser:
Uncaught ReferenceError: React is not defined
I have done some research on how to resolve the following issue which resulted in having to install various packages, which have shown to be all futile. I have had to uninstalled the packages.
Any help on how to resolve the issue would be great!
I am having trouble setting up a simple website with different webpages and staying DRY.
I have everything set up so I the last fragment of the url is the name of the template that needs to be loaded in the content part of the webpage. All I want to do now is load that template in a specific location based on the url.
In any examples, they do this:
{{#if showCreateDialog}}
{{> createDialog}}
{{/if}}
{{#if showInviteDialog}}
{{> inviteDialog}}
{{/if}}
I'd like to do something along the lines of
{{> {{template_name}} }}
Sadly, that doesnt work. I tried this as well:
{{{content}}}
Template.content.content = function () {
var url_frag = Session.get("url_frag");
return Template[url_frag]();
}
This didnt work either. Please help!
Edit:
hmm. perhaps, my error is not in loading the template but in capturing the url:
var TodosRouter = Backbone.Router.extend({
routes: {
"*url": "main"
},
main: function (url) {
Session.set("url", url.split('/'))
}
});
The error I am getting arises when url_frag is undefined...
var url_frag = Session.get("url_frag");
initially, this works, but upon changing webpages, it fails...
Solved. I just left backbone out of it
Template.content.content = function () {
var url = window.location.pathname.split('/');
var url_frag = url.pop()
return Template[url_frag]();
Then in the html:
<template name="content">
{{{content}}}
</template>
You could also try the router smart package at atmosphere, which also supports complex routes and filters.
https://atmosphere.meteor.com/package/router
Install meteorite using npm install -g meteorite
Install router using mrt add router
Add {{renderPage}} to body
Tada! /login now renders {{> login}}
Read the document here: https://github.com/tmeasday/meteor-router