nuxt/bridge

Script setup variable inaccessible from script

Closed this issue · 2 comments

wJoenn commented

Environment

  • Operating System: Linux
  • Node Version: v18.19.1
  • Nuxt Version: 2.17.3
  • CLI Version: 3.10.0
  • Nitro Version: 2.9.4
  • Package Manager: pnpm@8.15.4
  • Builder: webpack
  • User Config: ssr, alias, app, bridge, build, css, components, runtimeConfig, http2, loading, loadingIndicator, plugins, router, typescript, modules, i18n, pwa, serverHandlers, devServerHandlers, devServer, nitro, buildModules
  • Runtime Modules: @nuxtjs/pwa@3.3.5, @nuxtjs/i18n@7.3.1, nuxt-vuex-router-sync@0.0.3
  • Build Modules: (), @nuxt/bridge@3.1.0

Reproduction

https://stackblitz.com/edit/github-fxasxi?file=pages%2Findex.vue

Describe the bug

Before updating our application from 2.15.7 + @nuxtjs/composition-api to 2.17.2 + bridge we used to create components in a script setup tag and use Vuelidate's validations on variables declared in the setup script from an adjacent script tag. (It's necessary to keep vuelidate's validations inside a classic script becaus eit's not compatible with the composition API)

<script setup>
const task = ref('');
</script>

<script>
import { required } from 'vuelidate/lib/validators';

export default defineComponent({
  validations() {
    return {
      task: { required },
    };
  },
});
</script>

Since we updated, this is no longer possible.
The setup variables are now inaccessible in the script so Vuelidate keeps trying to validate the presence of an undefined variable instead of the actual ref

I thought it would be solved with #1104 but even after updating bridge to 3.1 is does not solve the problem

You can test this from the reproduction, simply input anything in the text field then press submit and notice how undefined is being logged in the devtool and the validation errors is set to true (meaning the validation didn't succeed)

Additional context

No response

Logs

No response

wattanx commented

Looks like defineExpose will solve this.

<script setup>
const task = ref('');

defineExpose({
  task
})
</script>

Also, vuelidate 2 supports the Composition API.

  • 👍1
wJoenn commented

Looks like defineExpose will solve this

Can confirm it does !
If there an official API to solve this then I suppose it's not a bug but the intended behaviour then. I wonder why it used to work with @nuxtjs/composition-api 🤷

Also, vuelidate 2 supports the Composition API.

Yeah but we don't really like the way the changes vuelidate in the newest version.
We decided to move to vee-validate instead but we have a lot of forms to refactor which will be done over a few weeks so we had to make Bridge work with vuelidate 0

Thanks a lot for the help Wattanx 🙌

  • 👍1