Use vue component in other vue component file

Question

I tried to use a vue component(Global.vue) in other component(App.vue), but there

Failed to mount component: template or render function not defined

error.

Global.vue:

<template>
  <div class="global-view">
    <p>Global </p>
  </div>
</template>

<script>
export default {
  name: 'global'
}
</script>

App.vue:

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

<script>
export default {
  name: 'app'
}
</script>

main.js:

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

Vue.component('global', require('./components/Global'))

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

See this github.com/sagalbot/vue-select/issues/127 - perhaps the require statement is casuing the problem, Johnathan suggests using import instead. — Richard Matsen
– Richard Matsen, Commented Sep 24, 2017 at 2:55

Nick Rucci · Accepted Answer · 2017-09-23 22:19:46Z

3

You need to import the component within the component file that you want to use it in.

`import Global from './components/Global'

From there you need to add a new key inside your components option that will "register" the component.

Here is what you want your app component to look like.

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

<script>
import Global from './components/Global

export default {
  name: 'app'
  components: {
    'global': Global,
  }
}
</script>

<global></global> should be able to render at this point.

answered Sep 23, 2017 at 22:19

Nick Rucci

1,06811 silver badges20 bronze badges

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

5 Comments

Bert Over a year ago

OP is already exposing the component globally using Vue.component.

Nick Rucci Over a year ago

@Bert: OP still needs to register that component to be used by the new Vue instance by adding it to the components object.

Bert Over a year ago

No, he does not, when it is registered globally.

arve0 Over a year ago

@Bert Doesn't template in .vue files get compiled to a render function, so Global.vue needs to know about custom components up front? Registering them later, globally, will not help with that.

Bert Over a year ago

Single file components do get compiled. They get compiled into an object that you can either register globally, or import locally using the components property. See this example. The real issue in the question is the difference between import and require.

ramazan793 · Accepted Answer · 2019-09-25 17:25:42Z

1

I use import instead of require(in main.js) and it works for me:

import Global from './components/Global.vue
Vue.component('global', Global)`

edited Sep 25, 2019 at 17:25

answered Sep 24, 2017 at 7:39

ramazan793

6891 gold badge9 silver badges24 bronze badges

Collectives™ on Stack Overflow

Use vue component in other vue component file

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related