How to dynamically load components in routes - javascript

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)...

Related

How to work on lazy load(async loading) Vue without vue-cli or node?

I am very new to vue. I know that this one is easy with vue-cli but I need to learn this first without using the node.
I was making many template files and pages in different js files. Suddenly it hit my mind that what if a lot of file is requested and downloaded?
What I am trying to do is I am trying to fuse route and async component loading together for loading different pages when they are called.
Is there a way to do this? This is the code that I tried for my initial project.
<html>
<head>
<script src="vue.js"></script>
<script src="vue-route.js"></script>
<script src="axios.min.js"></script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
</p>
<router-view></router-view>
</div>
<script>
//axios.get("https://shohanlab.com")
const Home = { template: '<div>Home</div>' }
const AsyncComp =
() =>
new Promise((resolve, reject) => {
resolve({
template: About
})
})
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: AsyncComp },
]
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes, // short for `routes: routes`
})
const app =Vue.createApp({})
app.use(router)
app.mount('#app')
</script>
</body>
</html>
As we can see in the code that The About.js is called even before I call it. In this way the page size will be very big.
Vue is primarily intended to be used with Vue CLI or other Node setup with a build step. The documentation and virtually all examples cover this scenario and assume that .vue SFC are used. It's still possible to use Vue 3 with vanilla JavaScript but this way lacks the documentation, features and a lot of third-party Vue libraries that cannot be used without being built.
It's possible to achieve this with lazy loading (as another answer noted). Native ES modules can be used for the same purpose to avoid a build step. Entry point needs to be a module either.
A demo:
index.html
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
</p>
<router-view></router-view>
</div>
<script type="module" src="script.js"></script>
about.js
export default { template: '<div>About</div>' }
script.js
const routes = [
{ path: '/', component: { template: '<div>Home</div>' } },
{ path: '/about', component: () => import('./about.js') },
]
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes,
})
const app =Vue.createApp({})
app.use(router)
app.mount('#app')
You can lazily load views as follows:
const routes = [
{
path: '/',
name: 'Dashboard',
component: () => import('../views/Dashboard.vue')
}
]
See the official docs for more info

Load dynamically a vuejs library and render the component on it

I have a vuejs app as a container for multiple other "apps".
The idea was to:
have a generic code to discover/load components
build the other apps as vuejs lib in order to be able to load component on it
On my first lib, I have this main.js:
import HelloRadar from './components/HelloRadar.vue'
export default HelloRadar
and this component, HelloRadar:
<template>
<div>
Hello from radar !
</div>
</template>
<script>
export default {
name: 'HelloRadar'
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
Now, on my main app, I have this code:
<template>
<div>
<ul>
<li v-for="module in modules" v-bind:key="module" #click="loadModule(module)">
{{ module }}
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'HelloWorld',
data() {
return {
modules: [],
selectedModuleMenu : null,
selectedModuleApp : null
}
},
created: function () {
axios.get("/orbit/api/modules").then((response) => {
var modulesList = response.data;
this.modules = modulesList;
});
},
methods: {
loadModule: function (moduleName) {
this.loadExternalComponent("/modules/" + moduleName + "/"+ moduleName + ".umd.js");
},
loadExternalComponent : function(url) {
const name = url.split('/').reverse()[0].match(/^(.*?)\.umd/)[1];
if (window[name]) return window[name];
window[name] = new Promise((resolve, reject) => {
const script = document.createElement('script');
script.async = true;
script.addEventListener('load', () => {
resolve(window[name]);
});
script.addEventListener('error', () => {
reject(new Error(`Error loading ${url}`));
});
script.src = url;
document.head.appendChild(script);
});
return window[name];
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
The issue is that the function loadExternalComponent seems not working. I got this js error in console:
Uncaught TypeError: Cannot read property 'createVNode' of undefined
Uncaught (in promise) TypeError: Chaining cycle detected for promise #
I have picked this method from here https://markus.oberlehner.net/blog/distributed-vue-applications-loading-components-via-http/
Do you have some idea how to make this kind of app ? Does using lib is the right way ? Thanks for your help
I think there's an answer to your question:
Components built via the Vue 3 vue-cli rely on Vue being available in
the global scope. So in order to render components loaded via the
technique described in my article, you need to set window.Vue to a
reference to Vue itself. Then everything works as expected.
Markus Oberlehner
#moriartie (Markus Oberlehner) has already worked that out with #markoffden: Vue 3 external component/plugin loading in runtime

VueJS; wait for element before running local JavaScript File

I have a few components, javascript, and elements that needs to be ran in a certain order.
1st - opensheetmusicdisplay.min.js which I have in my index.html file. This isn't an issue.
2nd - <div id="xml">
3rd - xml-loader.js which depends on both the "xml" div and opensheetmusicdisplay.min,js
This is the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script rel="preload" src="<%= BASE_URL %>js/osmd/opensheetmusicdisplay.min.js"></script>
</head>
<body>
<div id="xml2">words go here</div>
<div id="app"></div>
</body>
</html>
And this is the JavaScript part I'm attempting to test:
window.onload = function() {
alert("xx == ", document.getElementById("xml2"));
}
alert("xx2 == ", document.getElementById("xml2"));
alert(JSON.stringify(opensheetmusicdisplay, null, 1));
When I run this, they both instances of "xml2" show blanks. The opensheetmusicdisplay does show data, which means it is reading from the source in the head section in index.html
It was pointed out to me in the comments that alert only take one argument. That's a mistake that I'm going to let sit for the moment. The error in the console is TypeError: document.getElementById(...) is null.
Now, this is the main.js. There are a lot of comments because of my various ideas:
// vue imports and config
import Vue from 'vue'
import App from '#/App'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.config.productionTip = false
// page imports
import Notation from '#/components/Notation'
import HomePage from '#/components/HomePage'
// component imports and registration
import { FoundationCSS } from '#/../node_modules/foundation-sites/dist/css/foundation.min.css'
Vue.component('foundation-css', FoundationCSS)
import SideNav from '#/components/SideNav'
Vue.component('side-nav', SideNav);
// import * as Osmd from '#/../public/js/osmd/opensheetmusicdisplay.min.js'
// Vue.component('osmd-js', Osmd)
// import { OsmdJs } from '#/components/Osmd'
import * as XmlJs from '#/../public/js/osmd/xml-loader.js'
Vue.component('xml-js', XmlJs)
// import XLoad from '#/components/XmlLoader'
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/',
components: {
maininfo: HomePage
}
},
{ path: '/chromatic-scales/c-chromatic-scale',
components: {
maininfo: Notation// ,
// xmlloader: XLoad
}
}
]
})
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
I registered XmlJs as global because this is the only way out of 100 things that actually works. I then embed it in Notation.vue like so:
<template>
<div>
<div id="xml">
{{ notation.data }}
</div>
<xml-js />
</div>
</template>
<script>
import axios from 'axios'
export default ({
data () {
return {
notation: null,
}
},
mounted () {
axios
.get('http://localhost:3000/chromatic-scales/c-chromatic-scale')
.then(result => (this.notation = result))
}})
</script>
<style scoped></style>
The last file is the meat and potatoes of what I'm trying to do. The xml-loader.js slurps the data from <div id="xml"> and does whatever magic the program does in order to render the output I want. The issue is that there doesn't seem to be anyway to wait for the stuff in {{ notation.data }}.
I am new to using vuejs and front-end javascript frameworks in general. I do recognize the code is probably not optimal at this time.
There is race condition where DOM element is not available at the time when it's accessed. The solution is to not access DOM elements created by Vue outside of it. DOM element is ready for use only after asynchronous request:
<template>
<div>
<div ref="xml" id="xml">
{{ notation.data }}
</div>
<xml-js />
</div>
</template>
<script>
import axios from 'axios'
export default ({
data () {
return {
notation: null,
}
},
async mounted () {
const result = await axios
.get('http://localhost:3000/chromatic-scales/c-chromatic-scale')
this.notation = result;
this.$nextTick(); // wait for re-render
renderXml(this.$ref.xml); // pass DOM element to third-party renderer
}})
You can import xml-loader.js into the Notation.vue as a function. Then you can simply do something like this:
mounted () {
axios.get(PATH).then(result => {
this.notation = result
let xmlResult = loadXML(result)
doSomethingWithResult(xmlResult)
}
},
methods: {
doSomethingWithResult (result) {
// do something
}
}

Vue can't listen to Cordova events

I am trying to build a hybrid-app with Cordova. I am using VueJS for routing and AJAX requests.
Unfortunately I am not able to catch some of the Cordova events. Not even the deviceReady event is working. Here is my file:
require('./bootstrap');
var Vue = require('vue');
var VueRouter = require('vue-router');
Vue.use(VueRouter);
// Some components
Vue.component('test', require('./Vue/components/test.vue'));
Vue.component('mainnav', require('./Vue/partials/mainnav.vue'));
// Route-components
const Home = Vue.component('home', require('./Vue/pages/home.vue'));
const Login = Vue.component('login', require('./Vue/pages/auth/login.vue'));
const Register = Vue.component('register', require('./Vue/pages/auth/register.vue'));
const notFound = Vue.component('notFound', require('./Vue/pages/404.vue'));
// the routes
const routes = [
{ path: '', component: Home },
{ path: '/', component: Home },
{ path: '/login', component: Login },
{ path: '/register', component: Register },
{ path: '*', component: notFound }
];
const router = new VueRouter({
mode: 'history',
routes // short for routes: routes
});
const vueApp = new Vue({
router,
mounted: function(){
//alert('VueJS is ready!');
document.addEventListener('deviceReady', this.onDeviceReady, false);
},
methods: {
onDeviceReady: function() {
alert('Device is ready!');
}
}
}).$mount('#app');
Maybe I don't get a message because the device is ready before Vue is ready. But how can I handle this?
I have access to to other options, for example the vibration-plugin both from the Vue root-instance and from a vue component:
export default {
data() {
return {
vibrateDuration: 5000,
};
},
methods: {
letsVibrate: function(){
navigator.vibrate(this.vibrateDuration);
}
}
}
Any idea, how I can catch the device ready event within Vue?
It maybe is a question of concurrency. Try setting up some simple semaphore locks that trigger a function only when both are on (not tested, but you get the idea):
let deviceReady = false
let vueMounted = false
const vueApp = new Vue({
router,
mounted: function(){
vueMounted = true
if (deviceReady) vueApp.everythingReady()
},
methods: {
everythingReady: function() {
alert('Vue is mounted and everything is ready')
}
}
}).$mount('#app')
document.addEventListener('deviceReady', () => {
deviceReady = true
if (vueMounted) vueApp.everythingReady()
}, false)
For vue apps you must explicity add <script src="cordova.js"></script> to public/index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>My app</title>
</head>
<body>
<script src="cordova.js"></script> <!-- dude, add this -->
<div id="app"></div>
<noscript>
<strong
>We're sorry but ia doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong
>
</noscript>
</body>
</html>
Try with:
vueApp = new Vue({
//...
methods: {
onDeviceReady: function() {
alert('Device is ready!');
}
}
});
document.addEventListener(
'deviceready',
vueApp.onDeviceReady
);

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