Skip to main content
Every Vue application starts by creating an application instance with the createApp function.

​
Creating an Application

The createApp function is exported from the vue package (specifically from @vue/runtime-dom): 
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

​
API Signature

Based on the source code at packages/runtime-dom/src/index.ts:98-146, the createApp function: 
type CreateAppFunction<HostElement> = (
  rootComponent: Component,
  rootProps?: Data | null
) => App<HostElement>
​
rootComponent
Component
required
The root component object or options that will serve as the starting point for rendering.
​
rootProps
object
Props to pass to the root component (optional).

​
Mounting the Application

The application instance exposes a .mount() method that renders the root component into a DOM container:
1

Create the app instance

const app = createApp(App)
2

Mount to a container

app.mount('#app')
The mount method accepts either:
  • A CSS selector string (e.g., '#app')
  • An actual DOM element
  • A ShadowRoot

​
Mount Implementation Details

From packages/runtime-dom/src/index.ts:106-143, the mount method:
  1. Normalizes the container (finds element if string selector provided)
  2. Uses the container’s innerHTML as template if component has no render function or template
  3. Clears the container content
  4. Mounts the component and returns the component proxy
app.mount = (containerOrSelector: Element | ShadowRoot | string): any => {
  const container = normalizeContainer(containerOrSelector)
  if (!container) return

  const component = app._component
  if (!isFunction(component) && !component.render && !component.template) {
    component.template = container.innerHTML
  }

  container.textContent = ''
  const proxy = mount(container, false, resolveRootNamespace(container))
  if (container instanceof Element) {
    container.removeAttribute('v-cloak')
    container.setAttribute('data-v-app', '')
  }
  return proxy
}
If the mount target selector returns null, Vue will warn in development mode and the mount will fail silently.

​
SSR Applications

For server-side rendering with hydration, use createSSRApp instead: 
import { createSSRApp } from 'vue'

const app = createSSRApp(App)
app.mount('#app') // This will hydrate the server-rendered HTML

​
Difference from createApp

From packages/runtime-dom/src/index.ts:148-165:
  • createSSRApp uses the hydration renderer instead of the regular renderer
  • The mount method passes true as the hydration flag
  • This enables client-side hydration of server-rendered markup
app.mount = (containerOrSelector: Element | ShadowRoot | string): any => {
  const container = normalizeContainer(containerOrSelector)
  if (container) {
    return mount(container, true, resolveRootNamespace(container))
  }
}

​
Application Configuration

Before mounting, you can configure the application instance: 
app.config.globalProperties.$http = axios

// Now available in all components
this.$http.get('/api/data')

​
Using Plugins

Plugins extend Vue with additional functionality: 
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)

app.use(router)
app.use(store)

app.mount('#app')
Chain multiple configuration calls before mounting:
createApp(App)
  .use(router)
  .use(store)
  .mount('#app')

​
Multiple Application Instances

You can create multiple Vue applications on the same page: 
const app1 = createApp(App1)
app1.mount('#app1')

const app2 = createApp(App2)
app2.mount('#app2')
Each application instance is independent with its own:
  • Global configuration
  • Global components
  • Global directives
  • Plugins

​
Namespace Resolution

From packages/runtime-dom/src/index.ts:167-179, Vue automatically detects the proper namespace: 
function resolveRootNamespace(container: Element | ShadowRoot): ElementNamespace {
  if (container instanceof SVGElement) {
    return 'svg'
  }
  if (typeof MathMLElement === 'function' && container instanceof MathMLElement) {
    return 'mathml'
  }
}
This ensures proper rendering of SVG and MathML elements.

Component Basics

Learn about creating and using components

Lifecycle Hooks

Understand component lifecycle

Build docs developers (and LLMs) love

Get started for freeTalk to us