CODEWITHSUNDEEP
javascriptvue.js
artfulrobot
artfulrobot

Reputation: 21397

How to provide props to a root component in Vue3

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?

Upvotes: 4

Views: 5738

Answers (1)

Matt
Matt

Reputation: 44058

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);

Upvotes: 4

Related Questions