Adding Vuetify package to Excel addin made with VueJS framework

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"