use VueRouter and Vue.js in Chrome Extension - Issues with path segments

I had the same issue and I finally fixed it. It has been a year so not sure if it was fixed by chrome or Vue.

Anyway, I'll write down for anyone new to here:

Chrome pass URL based on folder structure and no implicit URL resolution. It means / won't redirect to index.html. So the solution is:

• Either add a path for index.html:

  { path: '/index.html', component: App },

• Or add a path for your app and manual push to it when loaded.

  //router.js{ path: '/app', component: App },

File App.vue

created(){    this.$router.push('app');}

And remember the routing path needs to exactly match the relative path in your chrome extension root. So if you put index.html in extension root, your Vue baseUrl must be /

Chrome is pointing at your popup.html file you´ve registered in the mainfest, which then will not be found by your router.

Setting the base url to the popup.html (depending on it´s location relative to the mainfest.json) solves it

const router = new VueRouter({  base: '/popup/popup.html',  mode: 'history',  routes,});

Chrome extensions have to comply with CSP (Content Security Policy) so you can't use Vue 2 because it's based on eval().

You need to use the CSP version of Vue and Vue-router version 1.0 to go with:

Vue 1.0-csp

https://github.com/vuejs/vue/tree/1.0-csp

Vue-router 1.0

https://github.com/vuejs/vue-router/tree/1.0