Multiple Components

[go4cas]

If I create multiple components, each with its own function definition, e.g.:

function Counter() {
  return {
    $template: '#template-counter',
    count: 0,
    inc() {
      this.count++
    },
    mounted() {
      console.log(`I'm mounted!`)
    }
  }
}

function Stats() {
  return {
    $template: '#template-stats',
    items: 123,
    label: 'ITEMS'
  }
}

How would I pass both of these to the mount method? I have tried using multiple mount calls, e.g:

createApp({Counter}).mount()
createApp({Stats}).mount()

But that does not work.

In my html view, I have:

<div v-scope="Stats()"></div>
<div v-scope="Counter()"></div>

[go4cas]

I got this working by doing this:

<div id="stats" v-scope="Stats()"></div>
<div id="counter" v-scope="Counter()"></div>

createApp({Counter}).mount('#counter')
createApp({Stats}).mount('#stats')

Is this the best/optimal approach?

[stancl]

Does createApp({ Counter, Stats }).mount() not work?

[go4cas]

@stancl, that works. Thanks!