[Vuejs]-Unable to pass props to root vue component

by

0👍

According to the forum thread mentioned by Mattic Ustard, the following seems like a good solution:

<!DOCTYPE html>
<html>
  <body>
    <!-- This is regular HTML not a Vue template - you can not use "v-bind:items" -->
    <!-- so you have to stringify the value -->
    <div id="app" items="@library"></div>
  </body>
</html>

Then in main.js:

import Vue from 'vue'
import App from './App'

new Vue({
  el: 'entry-component',
  computed:
  {
    items()
    {
      return this.$el.attributes.items.value;
    }
  },
  render(h) {
    return h(App, {
      props: {
        // propagate ITEMS as a prop for App.vue
        items: this.$el.attributes.items.value
      }
    })
  }
})

And in App.vue:

export default 
{
  props: ['items']
}

Leave a comment