Vue - include Vue file into other Vue file

Question

I'm new to Vue.

I have created some elements (I'm using Element Components) and the code gets too long. I would like to know if there is any way to create a several Vue files and include them all to one? For exmaple, I have Navbar.vue, Header.vue , Footer.vue and Body.vue.

I want to include them all into one file.

Is it possible?

How about creating an alias file which imports all the vue files you need and exports all of them at once. Then, you only need to import that file for that bundle. Would that solve your problem ? — Serdar Sayın
– Serdar Sayın, Commented Apr 20, 2020 at 18:09

Dejan.S · Accepted Answer · 2020-04-20 18:13:54Z

2

Sure. You import and use them like in my example. Don't forget to register them in the components as you can see.

This could be your app.vue file

<template>
  <div id="app" class="container">
    <the-header />
    <!-- this could be <TheHeader /> depending on your setup -->

    <the-navigation /> 
    <!-- this could be <TheNavigation /> depending on your setup --> 
  </div>
</template>

<script>
import TheHeader from '@/components/the-header.vue'
import TheNavigation from '@/components/the-navigation.vue'

export default {
  name: 'app',
  components: {
    TheHeader,
    TheNavigation
  }
</script>

<style lang="scss">
</style>

edited Apr 20, 2020 at 18:13

answered Apr 20, 2020 at 18:10

Dejan.S

19.2k22 gold badges73 silver badges122 bronze badges

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

2 Comments

E.Bolandian Over a year ago

Whats this code stands for? export default { name: 'app', components: { TheHeader, TheNavigation }

Dejan.S Over a year ago

@E.Bolandian this is what it looks like when you use vues single file components. You can read about them more here vuejs.org/v2/guide/single-file-components.html

Collectives™ on Stack Overflow

Vue - include Vue file into other Vue file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related