How to use ref returned from Composition API in Options API?

1
votes

I am running a setup() method to import an external component which only works with the Options API. Therefore once the imports have taken place, I then need to configure the component using Options API data.

How can I access the returned ref values from setup() within the data area of Options API? This is what I mean:

setup() {
    const IsBrowser = typeof window !== 'undefined';
    let EssentialsPlugin = ref(null);
    if (IsBrowser) {
      import('@ckeditor/ckeditor5-essentials/src/essentials').then(module => EssentialsPlugin.value = module);
    }

return {
 EssentialsPlugin
},

data() {
return { 
CKEditorConfig:  {
    plugins: [
      EssentialsPlugin   // Needs to be the EssentialsPlugin returned from setup()
]

If I run the above code, I get the error: Uncaught (in promise) ReferenceError: EssentialsPlugin is not defined.

In this case CKEditor5 only works with the Options API in Vue. It cannot be configured in Composition API for the foreseeable future. Therefore how can I configure it in Options API with ref values from Composition API setup()?

1
javascriptvue.jsvuejs3vue-composition-api

1 Answers

1
votes

If you have to use the Options API for data, it seems most sensible to use a lifecycle hook too:

data: () => ({
  isBrowser: typeof window !== 'undefined',
  CKEditorConfig: {
    plugins: []
  }
}),
created() {
  if (this.isBrowser) {
    import('@ckeditor/ckeditor5-essentials/src/essentials')
    .then(module => this.CKEditorConfig.plugins.push(module));
  }
}