Adding Vuetify package to Excel addin made with VueJS framework - excel

Question

I tried adding a excel add-in(Side load) using VueJS and created the manifest files by using Yeoman office package. I followed the instructions by going through this tutorial. Everything worked fine, now I wanted to add Vuetify framework to my add-in application.
On the main.js file from template, the Vue instance is initiated with this code
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
const Office = window.Office
Office.initialize = () => {
new Vue({
el: '#app',
components: {App},
template: '<App/>'
})
}
}
Now I am trying to add Vuetify and doing an npm install as per their docs by modifying the above code as:
import Vue from 'vue'
import App from './App'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
Vue.config.productionTip = false
const Office = window.Office
Office.initialize = () => {
new Vue({
el: '#app',
components: {App},
template: '<App/>'
})
}
When I introduce the Vuetify library, the add-in is not working..I am not sure how incorporate Vuetify to my Office add-in. Any help would be much appreciated. Thanks

Answer 1

I have uploaded an example repo with a Vue Excel addin using Vuetify:
https://github.com/beauholland/Vue-Excel-Addin
NPM install
NPM start
Browse to http://localhost:3000 and confirm the web app runs in IE11
If you get this far its time to sideload the app in Excel.
Setup sideload folder share for testing i.e. vue-excel\Graph API\ and configure Excel to trust share folder and insert addin https://learn.microsoft.com/en-us/office/dev/add-ins/testing/create-a-network-shared-folder-catalog-for-task-pane-and-content-add-ins
NOTE: the sample app in my repo is called "Graph API"

Answer 2

Recently got Vuetify working within an Excel Addin in Windows.
Are you on a Windows box?
Can you browse to your app i.e. http://localhost:3000 successfully?
Can you browse to your app i.e. http://localhost:3000 successfully within IE11?
Do you see any errors in your browser dev tools console?
What does "the add-in is not working" mean, any more specifics about the problem?
Issue I had was related to Vuetify IE11 compatibility, specifically...
Vuetify utilizes features of ES2015/2017 that require the need to use polyfills for Internet Explorer 11
Source: https://vuetifyjs.com/en/getting-started/quick-start#ie11-safari-9-support
As far as I am aware Excel addins require IE11 i.e. Office for Windows as at both 2013 and 2016 use an embedded IE11 instance to host add-ins.
Internet Explorer 11 or later, which must be installed but doesn't have to be the default browser. To support Office Add-ins, the Office client that acts as host uses browser components that are part of Internet Explorer 11 or later.
Source: https://learn.microsoft.com/en-us/office/dev/add-ins/concepts/requirements-for-running-office-add-ins
Source: https://officespdev.uservoice.com/forums/224641-feature-requests-and-feedback/suggestions/31155925-office-add-ins-should-run-in-edge-not-ie11