Init app component with props using VueJs

Question

I use VueJs with VueCli, and I would like to load a CSS file according to a "source" parameter that would be passed to the initiation of my main App component.

I would like to initialize my component like this in the index file: Main.js:

import Vue from 'vue'
import App from './App'
import router from './router'
import VueLadda from 'vue-ladda'
import VueResource from 'vue-resource'
import VModal from 'vue-js-modal'
import BootstrapVue from 'bootstrap-vue'

Vue.use(VModal);
Vue.use(BootstrapVue);

Vue.use(VueResource);
Vue.config.productionTip = false
Vue.component('vue-ladda', VueLadda)

new Vue({
  el: '#app',
  props: ['source'],
  router,
  render: h => h(App)
})

Here my App component (App.vue)

<script>
export default {
  name: 'App',
  props: ['source'],
  data: function () {
    return {
    }
  },
  mounted: function () {
    console.log(this.source)
  }
}
</script>

But I get undifined. Someone would have an idea why?

how do you specify source parameter? What value do you want to see in console? — Max Sinev
– Max Sinev, Commented Jun 8, 2018 at 9:01
In the index.html <div id="app" source="foo"></div> In the console i will hop to see "foo" — Jonathan COHEN
– Jonathan COHEN, Commented Jun 8, 2018 at 10:04

tony19 · Accepted Answer · 2022-07-15 21:06:11Z

7

You are not passing props on the root component, you are registering a prop name source.

You can pass props in the render function's createElement alias h function itself

new Vue({
  el: '#app',
  props: ['source'],
  router,
  render: h => h(App, {props:{ source:' source prop'}})
})

Or you can replace the render option with a template option to pass props to App.vue

new Vue({
  el: '#app',
  props: ['source'],
  router,
  components:{App},
  template: '<App source="source prop"/>'
})

edited Jul 15, 2022 at 21:06

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 8, 2018 at 9:07

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jonathan COHEN Over a year ago

But in this case, it does not seem to be dynamic? I wish I could instantiate my component App with different sources. Once with 'foo' and another with 'bar' Something like that <div id="app" source="foo"></div> OR <div id="app" source="bar"></div>

Vamsi Krishna Over a year ago

then use dynamic binding using v-bind

Serious Angel Over a year ago

Purely awesome... Thank you! It's the second answer which mentions the same quite powerful yet seem undocumented feature: stackoverflow.com/a/50854274/5113030 (Passing props to root instances in Vue.js...) It was quite time-consuming to find these two... A few alternatives commented there just in case: filosophy.org/code/… || v3-migration.vuejs.org/breaking-changes/props-data.html || lmiller1990.github.io/vue-testing-handbook/…

Jonathan COHEN · Accepted Answer · 2018-06-08 08:54:47Z

0

The template in App.vue is simple like this:

<template>
  <div id="app" source="mySource">
          <router-view/>
  </div>
</template>

answered Jun 8, 2018 at 8:54

Jonathan COHEN

1252 gold badges2 silver badges8 bronze badges

Comments

bbsimonbb · Accepted Answer · 2018-06-08 09:36:07Z

0

If I understand you properly, this sounds like a bad idea. Props are for creating a reactive pipe to dynamic data, to update the dom. Links to scripts and stylesheets are not like other dom content, and loading css dynamically requires special treatment. You can't just change the href on the fly.

Why do you want to do this? There has to be a cleaner way.

answered Jun 8, 2018 at 9:36

bbsimonbb

29.2k18 gold badges92 silver badges129 bronze badges

2 Comments

Jonathan COHEN Over a year ago

In fact, I have to create a component that will be used by several different providers. All the logic will be the same but for each provider I must be able to use a different stylesheet. They will just have to include my built file as well as the div with the 'source' parameter. So at the pretender 'foo' he will have to insert my component with source = 'foo' to load the good style sheet

Jonathan COHEN Over a year ago

Indeed, once the source parameter is recovered, I will load the CSS once the component will be mounted with the technique mentioned in the previous link

Collectives™ on Stack Overflow

Init app component with props using VueJs

3 Answers 3

3 Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Linked

Related