VueJS app is blank

Question

I have started vueJS app cloning this repo https://github.com/auth0-blog/vue-jwt-authentication. I have developed with that for few days and developed some pages with that. Later realized that it was Vue1.0. I then used https://github.com/vuejs/vue-migration-helper and migrated to vue 2.0. I have fixed all the errors one by one.

Now when I run the app, it just does not show any error but it was empty. I dont even get any errors in either browser console or in npm terminal. In the Inspect element, <div id="app"></div> was empty. Someone please take some time. I have the code in this repo here. https://bitbucket.org/AswinKP/vuesample. I am sharing the entire repo because I cant just figure out where I am making a mistake.

I have researched for this and cant find any such issues. I am a beginner in vue js and I am struggling in this for last two days. Thanks in advance.

Answer 1

There are several errors. First the repo can't compile at all.

in index.js:8 and :37 the file components/IncidentTrendI7.vue doesn't exist, simply remove these two lines.

and the build.js isn't included in your index.html, add <script src="build/build.js"></script> manually in your index.html

The last one is your root component. You need a render function to render your app in Vue 2.0 (or a template if you use the standalone build, but the runtime-only version is preferred), so the root component in your index.js will look like:

const app = new Vue({
  el: '#app',
  router,
  render: h => h(App),
  components: { App }
})

Answer 2

Face the same issue i solved it my adding base url to routerwebhistory by default its point to root of your folder

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/vue/dist/' : '/'
}

const router = createRouter({
  history: createWebHistory('/vue/dist'),
  routes,
});