Default options not working

[andyjamesn]

Describe the bug Created a Vue field plugin using monorepo with the cli

To Reproduce Steps to reproduce the behavior: Ass simple starter field to log the options

Add options to field-plugin.config.json

<script setup lang="ts">
import { useFieldPlugin } from '@storyblok/field-plugin/vue3';

const plugin = useFieldPlugin()

console.log(plugin);
</script>

{
  "options": [
    {
      "name": "option",
      "value": "value"
    }
  ]
}

Expected behavior Expect to log the options but it is emty

Screenshots

Desktop (please complete the following information):

• OS: mac 14.3
• Browser chrome
• Version 124

Additional context Using the sandbox I also see no default options are set

[demetriusfeijoo]

Hey @andyjamesn 👋 , thanks for reaching out to us and for all the provided details.

Since a field plugin is embedded within an iframe, all communication between the plugin and the container (such as the Sandbox) is done asynchronously. This means that if you try to access the data property right after calling the useFieldPlugin helper, it won't return anything.

The plugin needs to wait for the container to send the data back before it can use it. To determine when all the data is ready, you can check the plugin.type property to see if its value is loaded.

So, I would suggest you try the following approach which I think may fix the issue:

const plugin = useFieldPlugin()

watch(
  () => plugin.type,
  (type) => {
    if (type === 'loaded') { // make sure to access the data only after the plugin is correctly loaded.
      console.log('options', plugin.data?.options)
    }
  },
)

Let me know if it helped you 🙌

[andyjamesn]

Hey @demetriusfeijoo

I am already using the same watch in my code and had tested logging options in it.

I posted a simplified version of my code in my initial post.

I do this to create a setContent helper so I do not need to do plugin.actions.setContent and also to setup my initial content because even though I am adding it in validateContent it is not being set.

watch(
  () => plugin.type,
  (type) => {
    if (type === 'loaded') {
      setContent = plugin?.actions?.setContent
      Object.assign(form, plugin.data.content)
      // logging options is empty
      console.log(plugin?.data?.options)
    }
  },
)

Here is my entire file. I added your exact code too (but it is the same as mine) to be sure and get an empty object

<script setup>
import { reactive, watch } from 'vue'
import { useFieldPlugin } from '@storyblok/field-plugin/vue3'

const initialForm = {
  title: 'Hello',
  description: 'World',
}

const plugin = useFieldPlugin({
  validateContent: (content) => ({
    content:
      typeof content === 'object'
        ? content
        : {
            ...initialForm,
          },
  }),
})

// this is often undefined so we will set it in the watcher
let setContent = plugin?.actions?.setContent;

let form = reactive({ ...initialForm })

// watch plugin
watch(
  () => plugin.type,
  (type) => {
    if (type === 'loaded') {
      setContent = plugin?.actions?.setContent
      Object.assign(form, plugin.data.content)
      console.log(plugin?.data?.options)
    }
  },
)

// code from demetriusfeijoo <-- also empty options: {}
watch(
  () => plugin.type,
  (type) => {
    if (type === 'loaded') { // make sure to access the data only after the plugin is correctly loaded.
      console.log('options', plugin.data)
    }
  },
)

// watch form for changes and update content
watch(form, (v) => {
  setContent({ ...v })
});

</script>

<template>
  <SbTextField
    v-bind="{ label: 'Text input' }"
    v-model="form.title"
  />
  <SbTextField
    v-bind="{ label: 'Description' }"
    v-model="form.description"
  />

</template>

[demetriusfeijoo]

Thanks for the sample @andyjamesn, pretty helpful 💯

I tested it out here, and it worked nicely 🤔. I suspect the issue might be related to the options not being set correctly in the sandbox.

If so, could you confirm if the options you configured in the field-plugin.config.json are present in the sandbox URL, after running yarn dev?

[andyjamesn]

Ah I see. Since the options are set in the manifest, when options are added or changed the dev server needs to be restarted.

Thanks for all the help, all sorted now!