VueJS - what's the difference between main.js - app.vue and component.vue?

Question

I just got started to Vue and i added it to my Django project using Webpack-Loader, so i'm not creating a SPA, and i have some very basic doubts about the structure of vue.

I have a component that i added to one of my HTML templates, it's a very basic datatable made with Vuetify, the full code is here: https://codesandbox.io/s/strange-goldwasser-gfl7x?file=/src/App.vue

What is not very clear to me, yet, is the whole component.vue -> app.vue -> main.js mechanism. In this case if i want to use that component i created on a template, i will just add the following to the template:

<div id="app">
    <app></app>
</div>

But what happens when i want to create a new component? Suppose that i created another component and i want to use it on the same or another page of my Django project, what do i need to do? Do i have to create another app.vue for every component? Do i have to create another main.js file for the component? Or do i need to use only one app.vue and one main.js for all my components? Thanks in advance for any kind of advice!

Answer 1

In your situation this is what happens:

• Your django page includes your main.js (or the bundle that was created for main.js).
• main.js start looking for an element with id #app
• it will fill it with <App /> because you told it to do so (via the template property)

You asked if you now have to do component.vue -> app.vue -> main.js for each new component you create. Currently, yes, because your main.js isn't setup to be flexible. To make main.js more flexible you could do the following:

import App from 'App.vue';
Vue.component('app', App);

import AnotherComponent from './AnotherComponent.vue';
Vue.component('another-component', AnotherComponent);

// Here you tell Vue to look for an element with an id #app.
// But by not supplying it a template it will use the content 
// of #app as template.
// The django page may now determine what you want Vue to do.
new Vue({
  el: "#app", 

  // template: '' // Let django page determine.
  // components: { App } // use Vue.component to register components globally instead.

  vuetify: Vuetify // when you want to use Vuetify.
});

I hope this made Vue a bit clearer.