title: Where to import component in Vue?
body: <p>New to Vue, working off a scaffolded project from the command line. Currently I have:</p>
  
  <p><code>index.js</code></p>
  
  <pre><code>import Vue from 'vue'
  import Router from 'vue-router'
  import Home
  
  from '../components/home'
  
  
  
  Vue.use(Router)
  
  export default new Router({
    routes: [
      {
        path: '/',
        name: 'home',
        component: Home
      }
    ]
  })
  </code></pre>
  
  <p><code>main.js</code></p>
  
  <pre><code>import Vue from 'vue'
  import App from './App'
  import router from './router'
  
  
  Vue.config.productionTip = false
  
  new Vue({
    el: '#app',
    router,
    components: { App },
    template: '&lt;App/&gt;'
  })
  </code></pre>
  
  <p><code>App.vue</code></p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;router-view/&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'App',
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  #app {
    // default styles are here
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>And <code>home.vue</code></p>
  
  <pre><code>&lt;template&gt;
      &lt;chart-component&gt;&lt;/chart-component&gt;
  &lt;/template&gt;
  // rest of home
  </code></pre>
  
  <p>I am trying to create and import <code>chart-component.vue</code> to use inside <code>home.vue</code> but not sure where to import it at. I've tried adding it in <code>main.js</code> and <code>App.vue</code> unsuccessfully.</p>
  
  <p><code>chart-component.vue</code></p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;h1&gt;Testing Chart Component&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: 'chart',
          data() {
              return {
  
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>This seems like a simple problem but unsure how to solve it. My best guess was importing it inside <code>App.vue</code> and adding a <code>components { ChartComponent }</code> underneath the <code>name</code>. Second attempt was importing it into <code>main.js</code> and putting <code>ChartComponent</code> inside <code>components: { App, ChartComponent }</code>.</p>