Implement yoast seo in vue.js - vue.js

Question

How can I implement yoast seo in vue.js?
I try to search an information in google but I could not found anything related. Do anyone have recommend?

Answer 1

You will need to hook the Wordpress REST API into your Vue.js app. Once you have the Yoast plugin installed, you can use a plugin such as this one in order to get the SEO data you require, or create your own endpoints for the queries that you need.

Answer 2

it's a quite complex topic. You either need an SSR setup (e.g. using Nuxt.js) or (what's actually better) you use either this theme:
http://vue-wordpress-demo.bshiluk.com
https://github.com/bucky355/vue-wordpress
or this:
https://wue-theme.tech-nomad.de
https://github.com/Tech-Nomad/wue-theme
The latter one is made by myself due to problems coming with Nuxt.js (window object, keep-alive not working, extra node.js server, not being able to use all the PHP templates). At the time I've started working on it the bucky355 theme didn't exist but it's quite similar to my. Even though I would consider my theme as more simple to use.

Answer 3

You can use vue-yoast components:
<template>
<div id="app">
<label>Title</label>
<input v-model="metaTitle" />
<label>Meta Description</label>
<input v-model="metaDescription" />
<label>Description</label>
<input v-model="description" />
<label>Focus Keyword</label>
<input v-model="focusKeyword" />
<snippet-preview
:title="metaTitle"
:description="metaDescription"
:url="url"
baseUrl="https://my-site.com/"
#update:titleWidth="(value) => titleWidth = value"
#update:titleLengthPercent="(value) => titleLengthPercent = value"
#update:descriptionLengthPercent="(value) => descriptionLengthPercent = value" />
<content-assessor
:title="metaTitle"
:titleWidth="titleWidth"
:description="metaDescription"
:url="url"
:text="description"
:locale="locale"
:resultFilter="assessorResultFilter" />
<seo-assessor
:keyword="focusKeyword"
:title="metaTitle"
:titleWidth="titleWidth"
:description="metaDescription"
:url="url"
:text="description"
:locale="locale"
:resultFilter="assessorResultFilter" />
</div>
</template>
<script>
import { SnippetPreview, ContentAssessor, SeoAssessor } from 'vue-yoast'
import 'vue-yoast/dist/vue-yoast.css'
export default {
name: 'App',
components: {
ContentAssessor,
SeoAssessor,
SnippetPreview
},
data () {
return {
focusKeyword: 'one',
metaTitle: 'Hello!',
metaDescription: 'The short description',
url: 'page/1',
description: '<h2>Here is subtitle!</h2> and some contents in HTML',
titleWidth: 0,
titleLengthPercent: 0,
descriptionLengthPercent: 0,
translations: null,
locale: 'en_US'
}
},
methods: {
assessorResultFilter (value) {
return value
}
}
}
</script>
<style>
#app {
max-width: 800px;
margin: 0 auto;
padding: 16px;
}
label {
display: block;
margin: 0;
padding: 0;
}
.vue-yoast {
margin-bottom: 10px;
}
</style>