What is the purpose of ‘main.js’ and ‘App.vue’ in a Vue.js application?

I believe you might be missing on some of the basics behind the structure of Vue.js and where and/or how to put in functionality like authentication. It might be worth going through their introduction again to solidify your knowledge.

To answer more directly, when you run a Vue.js application you need to have a basic HTML page (like index.html) as an entry point and the initialisation for your Vue.js application loaded in a <script> in that page.

When you write a Vue.js application you can choose to do it in pure JavaScript, in TypeScript or in the .vue component format which combines the HTML, CSS and JavaScript you need to define components.

The vue format is not run directly. It has to be transpiled into plain JavaScript by the Vue-CLI/builder and packed using a packager like Webpack first and then loaded by your entry point. Luckily, the Vue.js CLI handles nearly all of this process so you can get on with building.

File App.vue

This is typically the root of your application defined in Vue.js Component file format. It’s usually something that defines the template for your page:

<template>
  <div id="app">
    <SideBar />
    <router-view v-if="loaded" />
  </div>
</template>

<script>
import SideBar from "./pages/SideBar";

export default {
  components: { SideBar },
  computed: {
    loaded() {
      return this.$store.state.loadState == "loaded";
    }
  }
};
</script>

File main.js

This is usually the JavaScript file that will initialise this root component into a element on your page. It is also responsible for setting up plugins and third-party components you may want to use in your app:

import Vue from "vue";
import { store } from "./store/store";
import router from "./router";
import App from "./App.vue";

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

File index.html

The index page provides your entry point in HTML providing an element for Vue.js to load into and imports file main.js to initialise your application.

<!-- The HTML element that hosts the App.vue component -->
<div id="app"></div>

<!-- Built files will be auto injected -->
<script type="text/javascript" src="main.js"></script>

On another note, a decent place to put your authentication logic is in the router where you can add navigation guards to restrict access to pages based on the current authentication state and send your users to a login page:

// GOOD
router.beforeEach((to, from, next) => {
  if (!isAuthenticated) next('/login')
  else next()
})