Mixing Vue Composables with Class Based Components

Question

I'm attempting to mix composables into a class based component setup, as part of a slow migration from Vue 2 to Vue 3. However, I am struggling to referenced return values from the setup function within the class itself.

I have something similar to:

@Component({
  setup() {
    const fullscreenElement = ref<HTMLElement | undefined>();

    const { isFullscreen, toggle: toggleFullscreen } = useFullscreen(fullscreenElement);

    return {
      fullscreenElement,
      isFullscreen,
      toggleFullscreen,
    };
  },
})
export default class MyClassComponent extends Vue {
   // How to access isFullscreen et al. here ??
}

As in the above example, I can't seem to reference how I would use e.g., isFullscreen etc from within the component itself?

Answer 1

Docs:

• ref()
• Computed Properties
• Composables

const { ref, computed, createApp } = Vue;

const useFullscreen = function() {
  const _isFullscreen = ref(false);
  const isFullscreenFunc = function() {
    return _isFullscreen;
  }
  const isFullscreenComputed = computed(function() {
    return _isFullscreen;
  })
  
  const toggleFullscreen = function() {
    _isFullscreen.value = !_isFullscreen.value;
  }
  
  return {isFullscreenFunc, isFullscreenComputed, toggleFullscreen}
}

const MyComponent = {
    setup() {  
      const { isFullscreenFunc, isFullscreenComputed, toggleFullscreen } = useFullscreen();
      return {        
        toggleFullscreen,
        isFullscreenFunc,
        isFullscreenComputed
      }      
  }, 
  methods: {
      toggle() {
          this.toggleFullscreen();
      },
      show() {
        alert(`isFullscreenFunc: ${this.isFullscreenFunc().value}\n isFullscreenComputed: ${this.isFullscreenComputed.value}`);
      }
  },
  template: `
       <div>
         isFullscreenFunc: {{isFullscreenFunc().value}}<br /><br />
         isFullscreenComputed: {{isFullscreenComputed.value}}
         <br/><br/><button type="button" @click="toggle()">toggle</button>
         <button type="button" @click="show()">show</button>
       </div>`   
}

const App = {
  components: {
    MyComponent
  }
}

const app = createApp(App)
app.mount('#app')

<div id="app">        
    <my-component>
    </my-component>        
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>