Several Apps and Mount Targets

createApp(rootComponent, rootProps?) builds an application instance. It holds the plugins, global components, directives, config and app-level provides for one component tree. Nothing renders until app.mount(container), which accepts a DOM element or a CSS selector string — the first match — and returns the root component instance. Each app instance can be mounted once.

Several apps on one page

This is normal whenever Vue runs inside a page it does not own: a server-rendered template with a rating widget in one slot and a comment counter in another. Each createApp is a separate world. Plugins, global properties, directives and provides are per app, so a store or a router must be installed into every app that needs one, and two apps share state only if you hand them the same object. Since 3.5, set app.config.idPrefix on each app so the ids from useId() cannot collide across apps.

Mounting into existing markup

If the root component has a template or a render function, mounting replaces whatever was inside the container. To adopt HTML that a server already rendered, use createSSRApp instead: it hydrates the existing nodes in place, and repairs mismatches by replacing the offending nodes rather than keeping them.

Unmounting

app.unmount() walks the tree and runs the unmount hooks, which is where watchers, listeners and timers registered inside components get cleaned up. The instance is finished afterwards. To show the app again, call createApp for a fresh one.

The example widget renders a row of numbered buttons; clicking one marks that number as the chosen rating and leaves it pressed.

<script setup lang="ts">
import { computed, ref } from 'vue'

const props = withDefaults(
  defineProps<{ articleId: string; max?: number }>(),
  { max: 5 }
)

const score = ref<number | null>(null)
const stars = computed(() =>
  Array.from({ length: props.max }, (_, index) => index + 1)
)

function choose(value: number) {
  score.value = value
}
</script>

<template>
  <div class="rating" :data-article="props.articleId">
    <button
      v-for="star in stars"
      :key="star"
      type="button"
      :aria-pressed="score === star"
      @click="choose(star)"
    >
      {{ star }}
    </button>
  </div>
</template>

<style scoped>
.rating {
  display: flex;
  gap: 0.25rem;
}
.rating button[aria-pressed='true'] {
  font-weight: 700;
}
</style>

// src/widgets.ts
import { createApp } from 'vue'
import RatingWidget from './components/RatingWidget.vue'
import CommentCount from './components/CommentCount.vue'

const ratingEl = document.querySelector<HTMLElement>('[data-rating]')
if (ratingEl) {
  const app = createApp(RatingWidget, {
    articleId: ratingEl.dataset.article ?? ''
  })
  app.config.idPrefix = 'rating' // 3.5+: useId() returns "rating:0", "rating:1"
  app.mount(ratingEl)
}

const countEl = document.querySelector<HTMLElement>('[data-comment-count]')
if (countEl) {
  const app = createApp(CommentCount)
  app.config.idPrefix = 'comments'
  app.mount(countEl)
}

// src/panel.ts
import { createApp } from 'vue'
import type { App } from 'vue'
import HelpPanel from './components/HelpPanel.vue'

let current: App | null = null

export function openPanel(target: Element): void {
  closePanel()
  current = createApp(HelpPanel)
  current.mount(target)
}

export function closePanel(): void {
  current?.unmount()
  current = null
}

// src/entry-client.ts
import { createSSRApp } from 'vue'
import App from './App.vue'

// The HTML inside #app was rendered on the server.
// createSSRApp hydrates those nodes; createApp would discard them.
createSSRApp(App).mount('#app')