feat: add basic support for multiple apps on one page (#373)

* feat: add an appId to tags to support multiple apps * feat: show warning on calling () on non-vuemeta components * feat: always use appId ssr for server-generated apps * test: update tests for appId * chore: update circleci to only run audit for dependencies * fix: dont set data-vue-meta attribute on title it has no use on the client as we use document.title there. Which also means the appId listed would be wrong once the title is updated by another app then the ssr app * chore: remove unused import * chore: improve not supported message
2026-06-19 14:50:34 +03:00 · 2019-06-06 10:40:15 +02:00
parent 34c6ad957d
commit 024e7c5a62
23 changed files with 240 additions and 60 deletions
@@ -0,0 +1,82 @@
+import Vue from 'vue'
+import VueMeta from 'vue-meta'
+
+Vue.use(VueMeta)
+
+// index.html contains a manual SSR render
+
+const app1 = new Vue({
+  metaInfo() {
+    return {
+      title: 'App 1 title',
+      bodyAttrs: {
+        class: 'app-1'
+      },
+      meta: [
+        { name: 'description', content: 'Hello from app 1', vmid: 'test' },
+        { name: 'og:description', content:  this.ogContent }
+      ],
+      script: [
+        { innerHTML: 'var appId=1.1', body: true },
+        { innerHTML: 'var appId=1.2', vmid: 'app-id-body' },
+      ]
+    }
+  },
+  data() {
+    return {
+      ogContent: 'Hello from ssr app'
+    }
+  },
+  template: `
+    <div id="app1"><h1>App 1</h1></div>
+  `
+})
+
+const app2 = new Vue({
+  metaInfo: () => ({
+    title: 'App 2 title',
+    bodyAttrs: {
+      class: 'app-2'
+    },
+    meta: [
+      { name: 'description', content: 'Hello from app 2', vmid: 'test' },
+      { name: 'og:description', content: 'Hello from app 2' }
+    ],
+    script: [
+      { innerHTML: 'var appId=2.1', body: true },
+      { innerHTML: 'var appId=2.2', vmid: 'app-id-body', body: true },
+    ]
+  }),
+  template: `
+    <div id="app2"><h1>App 2</h1></div>
+  `
+}).$mount('#app2')
+
+app1.$mount('#app1')
+
+const app3 = new Vue({
+  template: `
+    <div id="app3"><h1>App 3 (empty metaInfo)</h1></div>
+  `
+}).$mount('#app3')
+
+
+setTimeout(() => {
+  console.log('trigger app 1')
+  app1.$data.ogContent = 'Hello from app 1'
+}, 2500)
+
+setTimeout(() => {
+  console.log('trigger app 2')
+  app2.$meta().refresh()
+}, 5000)
+
+setTimeout(() => {
+  console.log('trigger app 3')
+  app3.$meta().refresh()
+}, 7500)
+setTimeout(() => {
+  console.log('trigger app 4')
+  const App = Vue.extend({ template: `<div>app 4</div>` })
+  const app4 = new App().$mount()
+}, 10000)
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html data-vue-meta-server-rendered>
+<link rel="stylesheet" href="/global.css">
+<title data-vue-meta="ssr">App 1 title</title>
+<meta data-vue-meta="ssr" name="og:description" content="Hello from app 1">
+</html>
+<body>
+<a href="/">&larr; Examples index</a>
+<div id="app1" data-server-rendered="true"><h1>App 1</h1></div>
+<hr />
+<div id="app2"></div>
+<hr />
+<div id="app3"></div>
+<script src="/__build__/multiple-apps.js"></script>
+<script data-vue-meta="ssr" data-body="true">var appId=1.1</script>
+</body>
+</html>