Create, export & import components

Author: Dawid Adach

-

Amongst other advantages, Vue gained incredible momentum within the last year thanks to its reactive and composable components. Components are reusable Vue instances with a name. We can use this component as a custom element inside a root.

It’s common for an app to be organized into a tree of nested components:

Components tree

In this lesson, we will learn how to create, use and organize components.

1. Create and export component

  1. Create a new folder and call it components inside the src folder:
  2. Create components folder
  3. Create a new file called HelloWorld.vue inside comopnents/ folder:
  4. Create HelloWorld component
  5. Open the HelloWorld.vue file and paste the following code into it:
  6. 
    <template>
      <div class="hello">
        <h3>I am Hello World Component</h3>
      </div>
    </template>
    
    <script>
    export default {
      name: "HelloWorld"
    };
    </script>
    
    <style scoped>
    h3 {
      font-weight: normal;
      padding-top: 20px;
      padding-bottom: 30px;
    }
    </style>
    
        

As you noticed - within our script part we export our component:


<script>
export default {
  name: "HelloWorld"
};
</script>
    

This is the place where we can define the name of our component. Now when our component is ready can use it within our App component.

2. Import component

  1. Open and replace the content of the App.vue file with the following:
  2. 
    <template>
      <div class="app">
        <h2>I am App (main component)</h2>
      </div>
    </template>
    
    <script>
    export default {
      name: "App"
    };
    </script>
    
    <style>
    .app {
      margin: 0 auto;
      font-family: sans-serif;
      background-color: #ccf7e2;
      padding: 10px;
      border-radius: 5px;
      max-width: 500px;
    }
    </style>
        

    In order to use the HelloWorld component we have to first import and define it within thescript part:

  3. Add an import statement:
  4. 
    <script>
    import HelloWorld from "@/components/HelloWorld";
    
    [...]
    </script>
        
  5. Within the export default{...} declaration add HelloWorld to components list:
  6. 
    export default {
      name: "App",
      components: {
        HelloWorld
      }
    };
        
  7. Now we can use our new component using the <HelloWorld/> tag:
  8. 
    <template>
      <div class="app">
        <h2>I am App (main component)</h2>
        <HelloWorld/>
      </div>
    </template>
        
    HellWorld

Rate this lesson

Previous lesson Download Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...