fix(helper): update vue3 helper logic

packages/cli/templates/vue3/src/App.vue

@@ -1,14 +1,8 @@
 <script setup lang="ts">
 import FieldPlugin from './components/FieldPlugin.vue'
 import FieldPluginExample from './components/FieldPluginExample/index.vue'
-import { FieldPluginProvider } from '@storyblok/field-plugin/vue3'
 </script>
 
 <template>
-  <FieldPluginProvider>
-    <template v-slot:loading><span>Loading...</span></template>
-    <template v-slot:error><span>Error</span></template>
-
-    <FieldPluginExample />
-  </FieldPluginProvider>
+  <FieldPluginExample />
 </template>

packages/cli/templates/vue3/src/components/FieldPluginExample/Counter.vue

@@ -2,7 +2,10 @@
 import { computed } from 'vue'
 import { useFieldPlugin } from '@storyblok/field-plugin/vue3'
 
-const plugin = useFieldPlugin()
+const plugin = useFieldPlugin({
+  parseContent: (content: unknown) =>
+    typeof content === 'number' ? content : 0,
+})
 
 const handleIncrement = () => {
   const content = plugin.data.content

packages/cli/templates/vue3/src/components/FieldPluginExample/index.vue

@@ -5,15 +5,20 @@ import Counter from './Counter.vue'
 import AssetSelector from './AssetSelector.vue'
 import { useFieldPlugin } from '@storyblok/field-plugin/vue3'
 
-const plugin = useFieldPlugin()
+const plugin = useFieldPlugin({
+  parseContent: (content: unknown) =>
+    typeof content === 'number' ? content : 0,
+})
 
 function closeModal() {
   plugin.actions.setModalOpen(false)
 }
 </script>
 
 <template>
-  <div>
+  <div v-if="plugin.type === 'loaded'">
+    <pre>{{ plugin }}</pre>
+
     <button
       v-if="plugin.data.isModalOpen"
       type="button"
@@ -35,11 +40,11 @@ function closeModal() {
       <span class="sr-only">Close Modal</span>
     </button>
     <div class="container">
-      <Counter />
-      <hr />
-      <ModalToggle />
-      <hr />
-      <AssetSelector />
+      <!--      <Counter />-->
+      <!--      <hr />-->
+      <!--      <ModalToggle />-->
+      <!--      <hr />-->
+      <!--      <AssetSelector />-->
     </div>
   </div>
 </template>

packages/field-plugin/helpers/vue3/src/index.ts

@@ -1,2 +1 @@
 export * from './useFieldPlugin.ts'
-export { default as FieldPluginProvider } from './FieldPluginProvider.vue'

packages/field-plugin/helpers/vue3/src/useFieldPlugin.ts

@@ -1,23 +1,43 @@
-import { inject } from 'vue'
-import { type FieldPluginResponse } from '@storyblok/field-plugin'
+import {
+  createFieldPlugin,
+  CreateFieldPluginOptions,
+  FieldPluginResponse,
+} from '@storyblok/field-plugin'
+import { onMounted, reactive, UnwrapRef } from 'vue'
 
-export const useFieldPlugin = () => {
-  const plugin = inject<FieldPluginResponse<unknown>>(
-    'field-plugin',
-    () => {
-      throw new Error(
-        `You need to wrap your app with \`<FieldPluginProvider>\` component.`,
-      )
-    },
-    true,
-  )
+export const useFieldPlugin = <Content>({
+  parseContent,
+}: Omit<CreateFieldPluginOptions<Content>, 'onUpdateState'>): UnwrapRef<
+  FieldPluginResponse<Content>
+> => {
+  const plugin = reactive<FieldPluginResponse<Content>>({
+    type: 'loading',
+  })
 
-  console.log(plugin)
-  if (plugin.type !== 'loaded') {
-    throw new Error(
-      'The plugin is not loaded, yet `useFieldPlugin()` was invoked. Ensure that the component that invoked `useFieldPlugin()` is wrapped within `<FieldPluginProvider>`, and that it is placed within the default slot.',
-    )
-  }
+  onMounted(() => {
+    createFieldPlugin<Content>({
+      onUpdateState: (state) => {
+        if (state.type === 'error') {
+          // plugin.type = 'error'
+          // plugin.error = state.error
+          Object.assign(plugin, {
+            type: 'error',
+            error: state.error,
+          })
+        } else if (state.type === 'loaded') {
+          Object.assign(plugin, {
+            type: 'loaded',
+            data: state.data,
+            actions: state.actions,
+          })
+          // plugin.type = 'loaded'
+          // plugin.data = state.data
+          // plugin.actions = state.actions
+        }
+      },
+      parseContent,
+    })
+  })
 
   return plugin
 }