[stonecrop] setup stonecrop when component has been mounted

common/changes/@stonecrop/nuxt/fix-nuxt-setup_2025-01-23-09-57.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/nuxt",
+      "comment": "setup stonecrop when component has been mounted",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@stonecrop/nuxt"
+}

common/changes/@stonecrop/stonecrop/fix-nuxt-setup_2025-01-23-09-57.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/stonecrop",
+      "comment": "setup stonecrop when component has been mounted",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@stonecrop/stonecrop"
+}

common/config/rush/version-policies.json

@@ -13,7 +13,7 @@
 		"definitionName": "lockStepVersion",
 		"policyName": "stonecrop",
 		"version": "0.4.0",
-		"nextBump": "minor"
+		"nextBump": "patch"
 	}
 	// {
 	//   /**

common/reviews/api/stonecrop.api.md

@@ -105,8 +105,7 @@ export const Stonecrop: Plugin_2;
 
 // @public
 export type StonecropReturn = {
-    stonecrop: Ref<Stonecrop_2>;
-    isReady: Ref<boolean>;
+    stonecrop: Ref<Stonecrop_2 | undefined>;
 };
 
 // @public

docs/stonecrop/stonecrop.stonecropreturn.md

@@ -10,7 +10,6 @@ Stonecrop composable return type
 
 ```typescript
 export type StonecropReturn = {
-    stonecrop: Ref<Stonecrop>;
-    isReady: Ref<boolean>;
+    stonecrop: Ref<Stonecrop | undefined>;
 };
 ```

nuxt/src/runtime/layouts/StonecropHome.vue

@@ -1,14 +1,10 @@
 <template>
 	<div>Stonecrop Home</div>
-
-	<div v-if="isReady">
-		<p>Stonecrop is ready!</p>
-	</div>
 	<pre>{{ stonecrop }}</pre>
 </template>
 
 <script setup lang="ts">
 import { useStonecrop } from '@stonecrop/stonecrop'
 
-const { stonecrop, isReady } = useStonecrop()
+const { stonecrop } = useStonecrop()
 </script>

stonecrop/src/composable.ts

@@ -1,4 +1,4 @@
-import { inject, onBeforeMount, Ref, ref } from 'vue'
+import { inject, onMounted, Ref, ref } from 'vue'
 
 import Registry from './registry'
 import { Stonecrop } from './stonecrop'
@@ -9,8 +9,7 @@ import { useDataStore } from './stores/data'
  * @public
  */
 export type StonecropReturn = {
-	stonecrop: Ref<Stonecrop>
-	isReady: Ref<boolean>
+	stonecrop: Ref<Stonecrop | undefined>
 }
 
 /**
@@ -21,22 +20,23 @@ export type StonecropReturn = {
  * @public
  */
 export function useStonecrop(registry?: Registry): StonecropReturn {
-	if (!registry) {
-		registry = inject<Registry>('$registry')
-	}
+	const stonecrop = ref<Stonecrop>()
 
-	let store: ReturnType<typeof useDataStore>
-	try {
-		store = useDataStore()
-	} catch (e) {
-		throw new Error('Please enable the Stonecrop plugin before using the Stonecrop composable')
-	}
+	onMounted(async () => {
+		if (!registry) {
+			registry = inject<Registry>('$registry')
+		}
+
+		let store: ReturnType<typeof useDataStore>
+		try {
+			store = useDataStore()
+		} catch (e) {
+			throw new Error('Please enable the Stonecrop plugin before using the Stonecrop composable')
+		}
 
-	// @ts-expect-error TODO: handle empty registry passed to Stonecrop
-	const stonecrop = ref(new Stonecrop(registry, store))
-	const isReady = ref(false)
+		// @ts-expect-error TODO: handle empty registry passed to Stonecrop
+		stonecrop.value = new Stonecrop(registry, store)
 
-	onBeforeMount(async () => {
 		if (!registry || !registry.router) return
 
 		const route = registry.router.currentRoute.value
@@ -64,10 +64,7 @@ export function useStonecrop(registry?: Registry): StonecropReturn {
 
 			stonecrop.value.runAction(doctype, 'LOAD', recordId ? [recordId] : undefined)
 		}
-
-		isReady.value = true
 	})
 
-	// @ts-expect-error TODO: fix the type mismatch
-	return { stonecrop, isReady }
+	return { stonecrop }
 }