How to provide props to a root component in Vue3

Question

In Vue2 it was possible to do a pattern like so:

import TopLevelComponent from './TopLevelComponent.vue';

// const someLocalConfig = { prop1: 'val1', ... };

const app = new Vue({
  data() { return {}; },
  render: h => h(TopLevelComponent, {props: someLocalConfig})
});

Which gave you a way to use a single file component for the root component while booting the app by injecting config from elsewhere.

How do I do this in Vue3?

I've read that I can do this:

import { createApp } from 'vue';
import TopLevelComponent from './TopLevelComponent.vue';

const app = createApp(TopLevelComponent);

But how can I pass in someLocalConfig as the props for the app/top level component?

Does this answer your question? [Passing props to Vue root instance via attributes on element the app is mounted on](https://stackoverflow.com/questions/64010560/passing-props-to-vue-root-instance-via-attributes-on-element-the-app-is-mounted) — Michal Levý, Apr 23 '21 at 14:36

score 3 · Accepted Answer · edited Sep 06 '22 at 19:12

3

You can do it with a 2nd object parameter to createApp - this replaces the old way of doing a very similar thing (propsData)

Here is an example from the docs:

const app = createApp(
  {
    props: ['username'],
    template: '<div>{{ username }}</div>'
  },
  { username: 'Evan' }
)

In your case specifically:

const app = createApp(TopLevelComponent, someLocalConfig);

edited Sep 06 '22 at 19:12

tony19

125,647
18
229
307

answered Apr 23 '21 at 14:29

Matt

43,482
6
101
102

8

But how do you modify the props? – trusktr Oct 28 '21 at 15:24

How to provide props to a root component in Vue3

1 Answers1