Fix ecosystem-vue documentation (#608)

* Removed website from editUrl of docusaurus. * Updated ecosystem-vue custom prop section. * Additional removal of website from editUrl of docusaurus.
single-spa · May 3, 2024 · bf01b5a · bf01b5a
1 parent 89c97f1
commit bf01b5a
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 81 deletions.
diff --git a/versioned_docs/version-4.x/getting-started-overview.md b/versioned_docs/version-4.x/getting-started-overview.md
@@ -156,4 +156,4 @@ Read our [contributing guide](https://reactjs.org/contributing/how-to-contribute
 
 See [user showcase](/users).
 
-Is your company or project using single-spa? Let us know by submitting a PR to [this section](https://github.com/single-spa/single-spa.js.org/blob/master/website/src/data/users.js)!
+Is your company or project using single-spa? Let us know by submitting a PR to [this section](https://github.com/single-spa/single-spa.js.org/blob/master/src/data/users.js)!
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,34 +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
-// App.vue
-<template>
-  <button>{{ otherProp }}</button>
-</template>
-<script>
-export default {
-  props: ["mountParcel", "otherProp"],
-};
-</script>
+### Vue 3
+
+```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
@@ -231,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-5.x/getting-started-overview.md b/versioned_docs/version-5.x/getting-started-overview.md
@@ -165,4 +165,4 @@ Read our [contributing guide](/docs/contributing-overview/) to learn about our d
 
 See [user showcase](/users).
 
-Is your company or project using single-spa? Let us know by submitting a PR to [this section](https://github.com/single-spa/single-spa.js.org/blob/master/website/src/data/users.js)!
+Is your company or project using single-spa? Let us know by submitting a PR to [this section](https://github.com/single-spa/single-spa.js.org/blob/master/src/data/users.js)!
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,34 +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
-// App.vue
-<template>
-  <button>{{ otherProp }}</button>
-</template>
-<script>
-export default {
-  props: ["mountParcel", "otherProp"],
-};
-</script>
+### Vue 3
+
+```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
@@ -231,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/getting-started-overview.md b/versioned_docs/version-6.x/getting-started-overview.md
@@ -165,4 +165,4 @@ Read our [contributing guide](/docs/contributing-overview/) to learn about our d
 
 See [user showcase](/users).
 
-Is your company or project using single-spa? Let us know by submitting a PR to [this section](https://github.com/single-spa/single-spa.js.org/blob/master/website/src/data/users.js)!
+Is your company or project using single-spa? Let us know by submitting a PR to [this section](https://github.com/single-spa/single-spa.js.org/blob/master/src/data/users.js)!