Updated ecosystem-vue custom prop section.

single-spa · Dec 5, 2023 · 4f6bbe5 · 4f6bbe5
1 parent a11c2df
commit 4f6bbe5
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 78 deletions.
diff --git a/versioned_docs/version-5.x/ecosystem-vue.md b/versioned_docs/version-5.x/ecosystem-vue.md
@@ -83,7 +83,15 @@ const vueLifecycles = singleSpaVue({
   Vue,
   appOptions: {
     render(h) {
-      return h(App);
+      return h(App, {
+        props: {
+          // single-spa props are available on the "this" object. Forward them to your component as needed.
+          // https://single-spa.js.org/docs/building-applications#lifecycle-props
+          name: this.name,
+          mountParcel: this.mountParcel,
+          singleSpa: this.singleSpa,
+        }
+      });
     },
     router,
   },
@@ -132,35 +140,40 @@ export const unmount = vueLifecycles.unmount;
 
 ## Custom props
 
-[Single-spa custom props](/docs/building-applications/#custom-props) can be passed to your root component like so:
+[Single-spa custom props](/docs/building-applications/#custom-props) can be passed to your root component. In your application's entry file, add the props to your root component: 
+
+### Vue 2
 
 ```js
-// main.js
 const vueLifecycles = singleSpaVue({
   Vue,
   appOptions: {
     render(h) {
       return h(App, {
-        mountParcel: this.mountParcel,
-        otherProp: this.otherProp,
+        props: {
+          otherProp: this.otherProp,
+        },
       });
     },
-    router,
   },
 });
 ```
 
+### Vue 3
 
-```vue
-// App.vue
-<template>
-  <button>{{ otherProp }}</button>
-</template>
-<script>
-export default {
-  props: ['mountParcel', 'otherProp'],
-}
-</script>
+```js
+const vueLifecycles = singleSpaVue({
+  Vue,
+  appOptions: {
+    render(h) {
+      return h(App, {
+        // Notice that this is not within a props object!
+        otherProp: this.otherProp,
+      });
+    },
+    router,
+  },
+});
 ```
 
 ## Shared dependencies
@@ -232,29 +245,6 @@ const vueLifecycles = singleSpaVue({
 });
 ```
 
-## Custom Props
-
-[single-spa custom props](/docs/building-applications#custom-props) are available in the `render()` function in your main file. They can be passed as custom props to your App component.
-
-```js
-const vueLifecycles = singleSpaVue({
-  Vue,
-  appOptions: {
-    render(h) {
-      return h(App, {
-        props: {
-          // single-spa props are available on the "this" object. Forward them to your component as needed.
-          // https://single-spa.js.org/docs/building-applications#lifecycle-props
-          name: this.name,
-          mountParcel: this.mountParcel,
-          singleSpa: this.singleSpa,
-        },
-      });
-    },
-  },
-});
-```
-
 ## Parcels
 
 ### Creating a parcel

diff --git a/versioned_docs/version-6.x/ecosystem-vue.md b/versioned_docs/version-6.x/ecosystem-vue.md
@@ -83,7 +83,15 @@ const vueLifecycles = singleSpaVue({
   Vue,
   appOptions: {
     render(h) {
-      return h(App);
+      return h(App, {
+        props: {
+          // single-spa props are available on the "this" object. Forward them to your component as needed.
+          // https://single-spa.js.org/docs/building-applications#lifecycle-props
+          name: this.name,
+          mountParcel: this.mountParcel,
+          singleSpa: this.singleSpa,
+        }
+      });
     },
     router,
   },
@@ -132,35 +140,40 @@ export const unmount = vueLifecycles.unmount;
 
 ## Custom props
 
-[Single-spa custom props](/docs/building-applications/#custom-props) can be passed to your root component like so:
+[Single-spa custom props](/docs/building-applications/#custom-props) can be passed to your root component. In your application's entry file, add the props to your root component: 
+
+### Vue 2
 
 ```js
-// main.js
 const vueLifecycles = singleSpaVue({
   Vue,
   appOptions: {
     render(h) {
       return h(App, {
-        mountParcel: this.mountParcel,
-        otherProp: this.otherProp,
+        props: {
+          otherProp: this.otherProp,
+        },
       });
     },
-    router,
   },
 });
 ```
 
+### Vue 3
 
-```vue
-// App.vue
-<template>
-  <button>{{ otherProp }}</button>
-</template>
-<script>
-export default {
-  props: ['mountParcel', 'otherProp'],
-}
-</script>
+```js
+const vueLifecycles = singleSpaVue({
+  Vue,
+  appOptions: {
+    render(h) {
+      return h(App, {
+        // Notice that this is not within a props object!
+        otherProp: this.otherProp,
+      });
+    },
+    router,
+  },
+});
 ```
 
 ## Shared dependencies
@@ -232,29 +245,6 @@ const vueLifecycles = singleSpaVue({
 });
 ```
 
-## Custom Props
-
-[single-spa custom props](/docs/building-applications#custom-props) are available in the `render()` function in your main file. They can be passed as custom props to your App component.
-
-```js
-const vueLifecycles = singleSpaVue({
-  Vue,
-  appOptions: {
-    render(h) {
-      return h(App, {
-        props: {
-          // single-spa props are available on the "this" object. Forward them to your component as needed.
-          // https://single-spa.js.org/docs/building-applications#lifecycle-props
-          name: this.name,
-          mountParcel: this.mountParcel,
-          singleSpa: this.singleSpa,
-        },
-      });
-    },
-  },
-});
-```
-
 ## Parcels
 
 ### Creating a parcel