Why Google map does not work on the site? - javascript

Good afternoon, please tell me who knows, I am now learning to add a Google map to the site and do it with this article. I did everything as it was indicated, but the card does not work, please tell me why? Where did I make a mistake? Api-key is correct 100%. And I turn on the map in Google Cloud Platform. I use Vue cli Webpack-simple. My project on GitHub
Screenshot of a broken map
Console Error
Code of index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>google_map</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=[MY_API_KEY]"></script>
</body>
</html>
Component Google.map:
<template>
<div class="google-map" :id="name"></div>
</template>
<script>
export default {
name: 'google-map',
props: ['name'],
data: function () {
return {
map: ''
}
},
computed: {
mapMarkers: function () {
return this.markers
}
},
mounted: function () {
const element = document.getElementById(this.name)
const options = {
zoom: 14,
center: new google.maps.LatLng(59.93, 30.32)
}
this.map = new google.maps.Map(element, options)
},
methods: {}
}
</script>
<style scoped>
.google-map {
width: 640px;
height: 480px;
margin: 0 auto;
background: gray;
}
</style>
Code of App.vue:
<template>
<div class="container">
<google-map :name="name"></google-map>
</div>
</template>
<script>
import googleMap from './components/googleMap.vue'
export default {
data: function () {
return {
name: 'map',
}
},
mounted: function () {
},
components: {googleMap}
}
</script>

Looking at your original code, before you started trying to use GoogleMapsLoader, your error was very simple; you were trying to use window.google in the compiled JS, before it was loaded through googleapis.com. To fix, in your index.html, simply change this:
<script src="/dist/build.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=[MY_API_KEY]"></script>
To this:
<script src="https://maps.googleapis.com/maps/api/js?key=[MY_API_KEY]"></script>
<script src="/dist/build.js"></script>
If you want to use GoogleMapsLoader, please follow the documentation they provide; you should be wrapping any calls to the Google Maps API inside a callback function that the loader calls. There are a bunch of different approaches to how to do this, and almost definitely a better way to set up a global instance, but to at least make your code work, this is how you would need to code your mounted function:
mounted: function () {
GoogleMapsLoader.KEY = '[MY_API_KEY]';
GoogleMapsLoader.load(function(google){
const element = document.getElementById(this.name)
const options = {
zoom: 14,
center: new google.maps.LatLng(59.93, 30.32)
}
this.map = new google.maps.Map(element, options)
}.bind(this));
}

Related

Using Mapbox GL JS in Vue after initialization

My Map.vue is below, with parts of the code abbreviated so I don't expose any information. The Map is a component of my app and I would like to add some interactions to it. However, my method won't work, saying read property 'getPitch' of undefined. How can I initialize the map so that Mapbox's functions are still available later on?
<template>
<div id="map" class="map">
<button #click="getPitch">Test</button>
</div>
</template>
<script>
import mapboxgl from 'mapbox-gl';
export default {
name: "Map",
data() {
return {
};
},
props: {
mapdata: {
type: Object,
default: () => { return {}; }
}
},
beforeUpdate() {
mapboxgl.accessToken = "...";
const map = new mapboxgl.Map({
container: "map",
style: "...",
center: ...,
zoom: 11.85,
});
let mapRecords = this.mapdata.data;
map.once('styledata', function() {
map.addSource('...', {
...
});
map.addLayer({
...
})
});
},
methods: {
getPitch() {
map.getPitch();
}
}
};
</script>
<style scoped>
...
</style>
Solved
First, changed all map instances in beforeUpdate() to this.map. Then, in the getPitch function, added this line: let map = this.map;.
beforeUpdate does not look like the right hook. You probably should be using mounted.
Also, your variable map is out of scope for your getPitch method.

How to dynamically load components in routes

I'm a Vue newbie and I'm experimenting with vue-router and dynamic loading of components without using any additional libraries (so no webpack or similar).
I have created an index page and set up a router. When I first load the page I can see that subpage.js has not been loaded, and when I click the <router-link> I can see that the subpage.js file is loaded. However, the URL does not change, nor does the component appear.
This is what I have so far:
index.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<router-link to="/subpage">To subpage</router-link>
<router-view></router-view>
</div>
<script src="main.js"></script>
</body>
</html>
main.js
const router = new VueRouter({
routes: [
{ path: '/subpage', component: () => import('./subpage.js') }
]
})
const app = new Vue({
router
}).$mount('#app');
subpage.js
export default {
name: 'SubPage',
template: '<div>SubPage path: {{msg}}</div>'
data: function() {
return {
msg: this.$route.path
}
}
};
So the question boils down to: How can I dynamically load a component?
How can I dynamically load a component?
Try this:
App.vue
<template>
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<hr/>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
components: {}
};
</script>
main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
Vue.use(VueRouter);
Vue.config.productionTip = false;
const Home = () => import('./components/Home.vue');
const About = () => import('./components/About.vue');
const router = new VueRouter({
mode: 'history',
routes:[
{path:'/', component: Home},
{path:'/about',component: About}
]
})
new Vue({
router,
render: h => h(App)
}).$mount('#app');
Home.vue
<template>
<div>
<h2>Home</h2>
</div>
</template>
<script>
export default {
name: 'Home'
};
</script>
About.vue
<template>
<div>
<h2>About</h2>
</div>
</template>
<script>
export default {
name: 'About'
};
</script>
This way, the component Home will be automatically loaded.
This is the demo: https://codesandbox.io/s/48qw3x8mvx
I share your wishes for "as lean as possible" codebase and therefore made this simple example code below (also accessible at https://codesandbox.io/embed/64j8pypr4k).
I am no Vue poweruser either, but when researching I have thought about three possibilities;
dynamic imports,
requirejs,
old school JS generated <script src /> include.
It looks like the last is the easiest and takes least effort too :D Probably not best practice and probably obsolete soon (at least affter dynamic import support).
NB: This example is friendly to more recent browsers (with native Promises, Fetch, Arrow functions...). So - use latest Chrome or Firefox to test :) Supporting older browsers may be done with some polyfills and refactoring etc. But it will add a lot to codebase...
So - dynamically loading components, on demand (and not included before):
index.html
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue lazyload test</title>
<style>
html,body{
margin:5px;
padding:0;
font-family: sans-serif;
}
nav a{
display:block;
margin: 5px 0;
}
nav, main{
border:1px solid;
padding: 10px;
margin-top:5px;
}
.output {
font-weight: bold;
}
</style>
</head>
<body>
<div id="app">
<nav>
<router-link to="/">Home</router-link>
<router-link to="/simple">Simple component</router-link>
<router-link to="/complex">Not sooo simple component</router-link>
</nav>
<main>
<router-view></router-view>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.min.js"></script>
<script>
function loadComponent(componentName, path) {
return new Promise(function(resolve, reject) {
var script = document.createElement('script');
script.src = path;
script.async = true;
script.onload = function() {
var component = Vue.component(componentName);
if (component) {
resolve(component);
} else {
reject();
}
};
script.onerror = reject;
document.body.appendChild(script);
});
}
var router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
component: {
template: '<div>Home page</div>'
},
},
{
path: '/simple',
component: function(resolve, reject) {
loadComponent('simple', 'simple.js').then(resolve, reject);
}
},
{ path: '/complex', component: function(resolve, reject) { loadComponent('complex', 'complex.js').then(resolve, reject); }
}
]
});
var app = new Vue({
el: '#app',
router: router,
});
</script>
</body>
</html>
simple.js:
Vue.component("simple", {
template: "<div>Simple template page loaded from external file</div>"
});
complex.js:
Vue.component("complex", {
template:
"<div class='complex-content'>Complex template page loaded from external file<br /><br />SubPage path: <i>{{path}}</i><hr /><b>Externally loaded data with some delay:</b><br /> <span class='output' v-html='msg'></span></div>",
data: function() {
return {
path: this.$route.path,
msg: '<p style="color: yellow;">Please wait...</p>'
};
},
methods: {
fetchData() {
var that = this;
setTimeout(() => {
/* a bit delay to simulate latency :D */
fetch("https://jsonplaceholder.typicode.com/todos/1")
.then(response => response.json())
.then(json => {
console.log(json);
that.msg =
'<p style="color: green;">' + JSON.stringify(json) + "</p>";
})
.catch(error => {
console.log(error);
that.msg =
'<p style="color: red;">Error fetching: ' + error + "</p>";
});
}, 2000);
}
},
created() {
this.fetchData();
}
});
As you can see - function loadComponent() does the "magic" thing of loading components here.
So it works, but it is probably not the best solution, with regards to the (at least) following:
inserting tags with JS can be treated as a security problem
in the near future,
performance - synchronously loading files block the thread (this can
be a major no-no later in app's life),
I did not test caching etc. Can be a real problem in production,
You loose the beauty of (Vue) components - like scoped css, html and
JS that can be automatically bundled with Webpack or something,
You loose the Babel compilation/transpilation,
Hot Module Replacement (and state persistance etc) - gone, I believe,
I probably forgot about other problems that are obvious for
senior-seniors :D
Hope I helped you though :D
I wanted to see how usefull are "new" dynamic imports today (https://developers.google.com/web/updates/2017/11/dynamic-import), so I did some experiments with it. They do make async imports way easier and below is my example code (no Webpack / Babel / just pure Chrome-friendly JS).
I will keep my old answer (How to dynamically load components in routes) for potential reference - loading scripts that way works in more browsers than dynamic imports do (https://caniuse.com/#feat=es6-module-dynamic-import).
So at the end I noticed that you were actually very, very, very close with your work - it was actually just a syntax error when exporting imported JS module (missing comma).
Example below was also working for me (unfortunately Codesandbox's (es)lint does not allow the syntax, but I have checked it locally and it worked (in Chrome, even Firefox does not like the syntax yet: (SyntaxError: the import keyword may only appear in a module) ));
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<router-link to="/temp">To temp</router-link>
<router-link to="/module">To module</router-link>
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js:
'use strict';
const LazyRouteComponent = {
template: '<div>Route:{{msg}}</div>',
data: function() {
return {
msg: this.$route.path
}
}
}
const router = new VueRouter({
routes: [
{
path: '/temp',
component: {
template: '<div>Hello temp: {{msg}}</div>',
data: function() {
return {
msg: this.$route.path
}
}
}
},
{ path: '/module', name: 'module', component: () => import('./module.js')},
{ path: '*', component: LazyRouteComponent }
]
})
const app = new Vue({
router
}).$mount('#app');
and the key difference, module.js:
export default {
name: 'module',
template: '<div>Test Module loaded ASYNC this.$route.path:{{msg}}</div>',
data: function () {
return {
msg: this.$route.path
}
},
mounted: function () {
this.$nextTick(function () {
console.log("entire view has been rendered after module loaded Async");
})
}
}
So - allmost exactly like your code - but with all the commas;
subpage.js
export default {
name: 'SubPage',
template: '<div>SubPage path: {{msg}}</div>',
data: function() {
return {
msg: this.$route.path
}
}
};
So - your code works (i tested it by copy pasting) - you were actually just missing a comma after template: '<div>SubPage path: {{msg}}</div>'.
Nevertheless this only seems to work in:
Chrome >= v63
Chrome for Android >= v69
Safari >= v11.1
IOS Safari >= v11.2
(https://caniuse.com/#feat=es6-module-dynamic-import)...

VUE + google map how include api google

I started using vue. How can I include Google API to my page? This is my code:
<template>
<div id="map"></div>
</template>
<script>
export default {
methods: {
init () {
var map
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(-33.91722, 151.23064),
mapTypeId: 'roadmap'
})
}
}
}
</script>
Where can I set
<script src="https://maps.googleapis.com/maps/api/js?key=YourKey&callback=App.map" async defer></script>
The script element goes in your index.html file, for example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app"></div>
</body>
<script src="https://maps.googleapis.com/maps/api/js?key=YourKey&callback=App.map" async defer></script>
</html>
If this doesnt work for you, try removing the callback from the end of the <script> element's src attribute as well as the async and defer keywords, so it looks like:
<script src="https://maps.googleapis.com/maps/api/js?key=YourKey"></script>
Then in your vue instance, call your init() function once the App component has mounted. See below:
export default {
mounted () {
this.init()
},
methods: {
init () {
var map
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(-33.91722, 151.23064),
mapTypeId: 'roadmap'
})
}
}
}
I'd like to put the google map api just before </body>. Make sure your vue element is called before google map api (i.e. within app.js). Put initMap as the google api's callback.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app">
<map lat="1.23456" lng="100.21345"></map>
</div>
<script src="app.js"></script><!-- your vue element should be here -->
<script src="https://maps.googleapis.com/maps/api/js?key=YourKey&callback=initMap" async defer></script>
</body>
</html>
And this is my code in Map.vue, which has a definition of window.initMap(..). I also have a marker (pin) inside the map.
<template>
<div>
<div ref="map" style="width: 100%; height: 200px;"></div>
</div>
</template>
export default {
props: [
'lat',
'lng'
],
mounted() {
window.initMap = () => {
this.mapElement = new google.maps.Map(this.$refs.map, {
zoom: 14,
center: {lat: this.lat, lng: this.lng}
});
this.marker = new google.maps.Marker({
position: {lat: this.lat, lng: this.lng},
map: this.mapElement
});
}
},
data() {
return {
mapElement: null,
marker: null
}
}
}

Integrating Google Maps in vue.js

I've been trying to initialize a Google map on my vue.js project while including the script :
<script src="https://maps.googleapis.com/maps/api/js?key="MY_API_KEY"&callback=initMap" async defer></script>
The problem is that my .vue files look like that :
<template>
...
</template>
<script>
...
</script>
And I can't include more than one script tag in my vue file, I can show the map while passing by the index.html but I dont really want to put js on the index.html, + I can't point the script callback on a vue method.
Do you guys have some ideas on how to show up that map using a .vue file ? I did use vue2-google-maps but I'd like to use the original google map.
I have a fiddle which is doing something ok : https://jsfiddle.net/okubdoqa/ without using a callback in the script tag, but it doesnt work for me ... Thanks
I'd suggest using npm google-maps instead of adding a script in index.html. You might not need to call google-maps API in every pages, and I'd say it's better to use Webpack properly. You can use npm install google-maps
import GoogleMapsLoader from 'google-maps'
mounted: function () {
GoogleMapsLoader.load(function(google) {
let map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: position
})
})
}
It's a little fussy to get this working without using a library, and there are probably cleaner ways, but you can simply import the library and use it in your components if you want to get up and running.
First, don't use the defer & async options in the <script> tag. Load it in the index.html:
<script src="https://maps.googleapis.com/maps/api/js?key=yourKey"></script>
Then in your component you can access the global google and pass it an element once the component is setup. For example using the setup from the Vuejs cli:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<div id="myMap"></div>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}},
mounted: function() {
console.log("map: ", google.maps)
this.map = new google.maps.Map(document.getElementById('myMap'), {
center: {lat:61.180059, lng: -149.822075},
scrollwheel: false,
zoom: 4
})
}
}
</script>
<style scoped>
#myMap {
height:300px;
width: 100%;
}
</style>
I was searching for a different issue and found this one, there is another way that you could achieve this without having to add it in index.html.
I faced a similar problem where I had to use two Google API keys for different environments so hard-coding it in to index.html was not a good idea, I did this if it helps anyone -
main.js
export const loadedGoogleMapsAPI = new Promise( (resolve,reject) => {
window['GoogleMapsInit'] = resolve;
let GMap = document.createElement('script');
GMap.setAttribute('src',
`https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_API_KEY}&callback=GoogleMapsInit&region=IN`);
document.body.appendChild(GMap);
});
MapElem.vue
<template>
<div id="map"></div>
</template>
<script>
import {loadedGoogleMapsAPI} from '#/main'
export default {
name: 'MapEl',
mounted(){
loadedGoogleMapsAPI.then(()=>{
this.initMap()
});
},
methods:{
initMap(){
console.log(google.maps); //You can now access google maps object here
new google.maps.Map(document.getElementById('map'), {
// You configuration goes here
})
}
}
</script>
It's pretty straightforward, you write a Promise in main.js which will resolve to the callback initiated by Google script ( which we dynamically appended to the body ). Once the Promise is resolved you can access the map object in your component.
There's a different way if you would like to keep the code contained in a Component using the async loader $Scriptjs.
Install via npm
npm install scriptjs
import into your component
import $Scriptjs from 'scriptjs
load the script in the mounted hook (assuming you have a method in your component called initMap)
...
mounted () {
$Scriptjs('https://maps.googleapis.com/maps/api/js?key={YOUR_KEY}', () => {
this.initMap()
}
...
Initial vue part after Using google map callback function.
function initMap(){
var app = new Vue({
el:"#app",
data:{
name:"Niklesh Raut",
map:"",
mapOptions:{}
},
mounted(){
this.initMap();
},
methods:{
initMap: function(){
this.mapOptions = {
center: new google.maps.LatLng(21.139808079490507, 79.07690763473511),
zoom: 10,
mapTypeId: 'roadmap'
}
this.map = new google.maps.Map(document.getElementById("map"), this.mapOptions);
}
}
});
}
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#content {
width: 100%;
/*padding: 20px;*/
min-height: 100vh;
transition: all 0.3s;
}
.map{
height: 100%;
width:100%;
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDUFmbwJMBHU_paeMfVO7oqPC1IJEtbJUU&callback=initMap"></script>
</head>
<div id="app" class="wrapper">
<div id="content">
Name : {{name}}
<div id="map" class="map"></div>
</div>
</div>
Jsfiddle Link
Best and simple way to integrate Google Maps to Vue is use npm's libs.
You need to use vue-google-maps
npm install vue2-google-maps
then,
import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'
Vue.use(VueGoogleMaps, {
load: {
key: 'YOUR_API_TOKEN',
},
})
Just simple paste code below:
<GmapMap
:center="{lat:10, lng:10}"
:zoom="7"
map-type-id="terrain"
style="width: 500px; height: 300px"
>
</GmapMap>

How can I bind the html <title> content in vuejs?

I'm trying a demo on vuejs. Now I want the html title to bind a vm field.
The below is what I tried:
index.html
<!DOCTYPE html>
<html id="html">
<head>
<title>{{ hello }}</title>
<script src="lib/requirejs/require.min.js" data-main="app"></script>
</head>
<body>
{{ hello }}
<input v-model="hello" title="hello" />
</body>
</html>
app.js
define([
'jquery', 'vue'
], function ($, Vue) {
var vm = new Vue({
el: 'html',
data: {
hello: 'Hello world'
}
});
});
But the title seemed not bounded, how to make it work?
There are essentially two ways to solve it.
Use an existing Package
For example, vue-meta:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
metaInfo: {
// if no subcomponents specify a metaInfo.title, this title will be used
title: 'Default Title',
// all titles will be injected into this template
titleTemplate: '%s | My Awesome Webapp'
}
}
</script>
Create your own Component
Create a vue file containing:
<script>
export default {
name: 'vue-title',
props: ['title'],
watch: {
title: {
immediate: true,
handler() {
document.title = this.title;
}
}
},
render () {
},
}
</script>
Register the component using
import titleComponent from './title.component.vue';
Vue.component('vue-title', titleComponent);
Then you can use it in your templates, e.g.
<vue-title title="Static Title"></vue-title>
<vue-title :title="dynamic.something + ' - Static'"></vue-title>
You can do it with 1 line in the App.vue file, like this:
<script>
export default {
name: 'app',
created () {
document.title = "Look Ma!";
}
}
</script>
Or change the <title> tag content in public/index.html
<!DOCTYPE html>
<html>
<head>
<title>Look Ma!</title> <!- ------ Here ->
</head>
...
This answer is for vue 1.x
using requirejs.
define([
'https://cdn.jsdelivr.net/vue/latest/vue.js'
], function(Vue) {
var vm = new Vue({
el: 'html',
data: {
hello: 'Hello world'
}
});
});
<!DOCTYPE html>
<html id="html">
<head>
<title>{{ hello }}</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.js" data-main="app"></script>
</head>
<body>
{{ hello }}
<input v-model="hello" title="hello" />
</body>
</html>
you can do it like this using the ready function to set the initial value and watch to update when the data changes.
<html>
<head>
<title>Replace Me</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app">
<input v-model="title">
</div>
<script>
new Vue({
el: '#app',
ready: function () {
document.title = this.title
},
data: {
title: 'My Title'
},
watch: {
title: function (val, old) {
document.title = val
}
}
})
</script>
</body>
</html>
also i tried this based on your original code and it works
<html>
<head>
<title>{{ title }}</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app">
<input v-model="title">
</div>
<script>
new Vue({
el: 'html',
data: {
title: 'My Title'
}
})
</script>
</body>
</html>
Just to chime in here. I have read that VueJS wants nothing to do with the meta stuff so I would do such things outside of the "VueJS" realm.
Basically make a plain vanilla js service like below. Here you could add all the functions to handle the meta data stuff such as the Open Graph data.
meta.js
export setTitle(title) {
document.title = title
}
Now we can import the service in main and then provide it to any component in the app who wants it. I could even use my meta service in other projects too which use different frameworks like React or Angular. Portability is super cool!
main.js
import meta from './meta'
new Vue({
router,
render: h => h(App),
provide: {
meta: meta
}
}).$mount('#app')
Here the component injects the meta service it wants to use.
someView.vue
export default {
name: 'someView',
inject: ['meta'],
data: function() {
returns {
title: 'Cool title'
}
},
created: function() {
this.meta.setTitle(this.title);
}
}
This way the meta service is decoupled from the app because different parent components can provide different versions of the meta service. Now you can implement various strategies to see which one is right for you or even different strategies per component.
Basically the inject walks up the component hierarchy and takes the meta service from the first parent who provides it. As long as the meta service follows a proper interface, you're golden.
Decoupling with DI is super cool 😃
Title and meta tags can be edited and updated asynchronously.
You can use state management, create a store for SEO using vuex and update each part accordingly.
Or you can update the element by yourself easily
created: function() {
ajax().then(function(data){
document.title = data.title
document.head.querySelector('meta[name=description]').content = data.description
})
}
If you are using Vuex and want <title> to be part of your application state, then:
create a pageTitle state variable in Vuex
map the state to the template using mapState()
watch it in template, probably add immediate: true to trigger the watcher right away
in watcher, document.title = pageTitle
This will allow you to manage title with Vuex and keep them in sync. I found it useful for SPAs.
By doing this you don't have to mess with your original HTML template, as most of the time Vue root template resides inside <body>.
This is for Vue 2.x.
router.beforeEach((to, from, next) => {
let mohican = to.path; if (mohican == '/') mohican = 'Home'
document.title = mohican.replace('/','');
next();
return;
});
I have an application toolbar component which is common for all pages of my SPA website and is nested in App.vue. In every page I update my common toolbar title in the created hook of the page using Vuex store:
//in every page.vue
created() {
this.$store.commit('toolBar', { pageTitle: this.pageTitle, ... })
},
To automatically update the website title (along with the toolbar title) I use this mutation in the store:
//store.js
toolBar(state,val){
document.title = val.pageTitle
state.toolBar = val
},
Similarly, I use the same mechanism to update e.g. SEO metadata
just pass
:title="data.name"

Categories