VueJS - Components within components

Question

I have hopefully a very easy question: I'd like to link components from within components in VueJS.

What I have so far:

create.js (which will be rendered with webpack to create.min.js)

var Vue = require('vue')
var App = require('./components/App.vue')
var Language = require('./components/Language.vue')
var vm = new Vue(App,'#app')

components/App.vue

<template>
  <h1>Create!</h1>
  <ss-lang></ss-lang>
  <pre>
    {{ $data | json }}
  </pre>
</template>

<script>
    module.exports = {
        name : 'Create',
        components : {
        'ss-lang' : new Language()
        }
    }
</script>

components/Language.vue

<template>
  <select v-model="selectedLanguage">
    <option v-for="language in languages" v-bind:value="language.value">
      {{ language.name }}
    </option>
  </select>
</template>

<script>
module.exports = {
  name : 'Language',
  data : function(){
    return {
      selectedLanguage : '',
      languages : [
        {value: 'be_en', name: 'English'},
        {value: 'be_fr', name: 'Français'},
        {value: 'be_de', name: 'Deutsch'},
        {value: 'be_nl', name: 'Nederlands'},
        {value: 'be_es', name: 'Español'}
      ]
    }
  }
}
</script>

When I open in the browser, I get the message that "Uncaught TypeError: Language is not a function". I was hoping that by connecting 'ss-lang' to the Language would be sufficient in connecting (as I added Language in the create.js).

What am I doing wrong? (eg which part of the documentation am I missing?)

zxzak · Accepted Answer · 2016-01-18 12:33:03Z

1

You should import the Language component inside App.vue. In your example it only was imported in the context of create.js :

//App.vue
<script>
    var Language = require('./relative-path-to-the-component/Language.vue')
    module.exports = {
        name : 'Create',
        components : {
        'ss-lang' : Language
        }
    }
</script>

edited Jan 18, 2016 at 12:33

answered Jan 18, 2016 at 12:05

zxzak

9,4945 gold badges30 silver badges25 bronze badges

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

3 Comments

jvv Over a year ago

Thanks for your answer, I actually tried this option before already and unfortunately this gives me the same error message: "Uncaught TypeError: Language is not a function"

zxzak Over a year ago

Pass the Language object as is, don't instatiate it.

jvv Over a year ago

Ah thanks, I was still doing: new Language(). Now, no error anymore (also no select box, but that is an other story. Accepted answer ^

Collectives™ on Stack Overflow

VueJS - Components within components

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related