Fix: Root Props Passed to app.mount() Must Be an Object in Vue.js

What Causes This Warning?

This warning occurs when you pass a non-object value as the second argument to app.mount(). Root component props must be passed as a plain object.

The Problem

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// ❌ Invalid prop values
app.mount('#app', 'string')
app.mount('#app', 123)
app.mount('#app', null)
app.mount('#app', ['array'])

The Fix

Pass Object for Props

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// ✅ Props as object
app.mount('#app', {
  title: 'My App',
  user: { name: 'John' }
})

Alternative: Pass Props to createApp

import { createApp } from 'vue'
import App from './App.vue'

// ✅ Pass props directly to createApp
const app = createApp(App, {
  title: 'My App',
  user: { name: 'John' }
})

app.mount('#app')

Common Scenarios

Configuration Object

const config = {
  apiUrl: 'https://api.example.com',
  debug: process.env.NODE_ENV === 'development',
  theme: 'dark'
}

// ✅ Pass configuration as props
const app = createApp(App, config)
app.mount('#app')

Server-Side Props

// Props from server-rendered HTML
const serverProps = JSON.parse(
  document.getElementById('app').dataset.props || '{}'
)

// ✅ Ensure it's an object
const app = createApp(App, serverProps)
app.mount('#app')

Dynamic Props

function mountApp(containerId, props = {}) {
  // ✅ Default to empty object
  const app = createApp(App, props)
  app.mount(`#${containerId}`)
  return app
}

// Usage
mountApp('app', { title: 'Dashboard' })
mountApp('widget', { compact: true })

Micro-Frontend Pattern

// Entry point for micro-frontend
export function bootstrap(container, props) {
  // ✅ Validate props
  if (typeof props !== 'object' || props === null) {
    props = {}
  }

  const app = createApp(App, props)
  app.mount(container)
  return app
}

Root Component Receiving Props

<!-- App.vue -->
<script setup>
// ✅ Declare root props
defineProps({
  title: {
    type: String,
    default: 'Vue App'
  },
  user: {
    type: Object,
    default: () => null
  }
})
</script>

<template>
  <div>
    <h1>{{ title }}</h1>
    <UserProfile v-if="user" :user="user" />
  </div>
</template>

No Props Needed

// ✅ Don't pass second argument if no props
const app = createApp(App)
app.mount('#app')

// Or pass empty object explicitly
app.mount('#app', {})

Quick Checklist

• Root props must be a plain object {}
• Don’t pass strings, numbers, arrays, or null
• Pass props to createApp(Component, props) or app.mount(el, props)
• Default to empty object {} if props might be undefined
• Validate server-provided props before use