Tips for specifying the return type of app.mount()

Question

Tips for specifying the return type of app.mount()

Can I specify the return value type of app.mount()?

I have a component and I want to create Multiple application instances. However, when I try to use the return value of mount() to update variables associated with the component, TypeScript shows an error:

Property 'content' does not exist on type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, {}>'

Here is my component, which exposes the content:

// myComponent
<template>
hello
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const content = ref('')
defineExpose({ content })
</script>

Mounting the component to the DOM in main.ts:

// main.ts
import myComponent from './myComponent.vue'
const tooltipInstance = createApp(myComponent).mount('#v-tooltip')
tooltipInstance.content = 'xxx'

At this point, TypeScript throws an error for tooltipInstance.conent:

Property 'content' does not exist on type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>'.ts(2339)

Is there a way to determine the component type and apply it to the return value of app.mount()?

typescript vue.js vuejs3

Answer 1

Answer №1

According to the official documentation:

The App interface consists of a mount method that takes a rootContainer as an argument and returns a ComponentPublicInstance.

It is worth noting that the mount() function is designed to be called only once for each app instance:

"For each app instance, the mount() method can only be executed once."

This restriction implies that you may not achieve your desired outcome using the mount method in this scenario.

Answer 2

According to the official documentation:

The App interface consists of a mount method that takes a rootContainer as an argument and returns a ComponentPublicInstance.

It is worth noting that the mount() function is designed to be called only once for each app instance:

"For each app instance, the mount() method can only be executed once."

This restriction implies that you may not achieve your desired outcome using the mount method in this scenario.

Answer 3

Answer №2

Even though the editor may display an error message, you can still access the content value. For instance, if you set it to 'xxx', it can be displayed on the console, indicating that the value is accessible. However, prior to that, you must create a container with the id of v-tooltip in the index.html file located in the project's root directory to connect your instance.

// index.html
<div id="v-tooltip"></div>

// myComponent
<template>
hello
</template>
    
<script lang="ts" setup>
import { ref } from 'vue'
const content = ref('Hello World')
defineExpose({ content })
</script>

// main.ts
const app = createApp(myComponent);
const temp = app.mount('v-tooltip')
console.log(temp.content) // Despite potential error prompts from the editor, 
// you have actually exposed this attribute using the defineExpose method. 
// Expected output: 'Hello World', actual output: 'Hello World'

Answer 4

Even though the editor may display an error message, you can still access the content value. For instance, if you set it to 'xxx', it can be displayed on the console, indicating that the value is accessible. However, prior to that, you must create a container with the id of v-tooltip in the index.html file located in the project's root directory to connect your instance.

// index.html
<div id="v-tooltip"></div>

// myComponent
<template>
hello
</template>
    
<script lang="ts" setup>
import { ref } from 'vue'
const content = ref('Hello World')
defineExpose({ content })
</script>

// main.ts
const app = createApp(myComponent);
const temp = app.mount('v-tooltip')
console.log(temp.content) // Despite potential error prompts from the editor, 
// you have actually exposed this attribute using the defineExpose method. 
// Expected output: 'Hello World', actual output: 'Hello World'

Tips for specifying the return type of app.mount()

Answer №1

Answer №2

Similar questions

Looking for guidance on integrating Forms with VueX and script setup? Are you utilizing v-model in your implementation?

Encountering a malfunction while creating a file using electron/vue

Submitting Files to the API using Vue.js

Encountering a Typescript error with Next-Auth providers

How can I transfer a variable from a Symfony server to a VITE VUE server successfully resolved

Guidance on using an array to filter an object in Javascript

Angular 2- Unable to bind to 'ngSwitchCase' as it is not recognized as a native property

The issue of the list view button not responding to click events in Angular2 NativeScript

What steps can I take to have TypeScript limit the type of an array based on filter inference?

Tips for creating a TypeScript-compatible redux state tree with static typing and immutability:

The call stack limit has been exceeded in VueJS/VueX

A solution to the error message "Type 'unknown' is not assignable to type 'Country[]' in React TypeScript" is to explicitly define the type of the

Implementation of a recursive stream in fp-ts for paginated API with lazy evaluation

I am interested in utilizing $axios in conjunction with Vuex constants for my project

Combine both typescript and javascript files within a single Angular project

Struggling with getting render props to work in Next.js version 13

Is there a way to transform a six-digit input into a date format using vue/JavaScript?

Firestore generates an error stating that 'onSnapshot() must have 1 to 4 arguments'

Vue.js: EventBus.$on is not properly transmitting the received value

Dynamic Path Integration with Vuefire