CODEWITHSUNDEEP
javascriptvue.jsnuxt.jsoffice-jsoffice-addins
Sylnois
Sylnois

Reputation: 1631

Office.JS but in Nuxt

I am trying to get an Office-Addin work in Nuxt instead of Vue (Source: https://learn.microsoft.com/en-us/office/dev/add-ins/quickstarts/excel-quickstart-vue).

# Working example in Vue
import { createApp } from 'vue'
import App from './App.vue'

window.Office.onReady(() => {
    createApp(App).mount('#app');
});

What i have tried so far in Nuxt:

# plugins/office.js
console.log(window.Office)
window.Office.onReady(function () {
    alert("office is ready");
});

# nuxt.config.js
plugins: [
    { src: '~/plugins/outlook.js', mode: 'client' },
  ],

But I got undefined and Uncaught TypeError: Cannot read properties of undefined (reading 'onReady') in the console.

Upvotes: 0

Views: 310

Answers (1)

Sylnois
Sylnois

Reputation: 1631

I have found a solution with the help of a random guy with a heart on the internet that replied to my email (https://github.com/benemohamed). All I did is put following code snippet in my outlook.vue file:

  head() {
    return {
      script: [
        {
          innerHTML: `
        window._historyCache = {
            replaceState: window.history.replaceState,
            pushState: window.history.pushState
        };
     `,
        },
        {
          src: "https://appsforoffice.microsoft.com/lib/1/hosted/office.js",
        },
        {
          innerHTML: `
        // And restore them
        window.history.replaceState = window._historyCache.replaceState;
        window.history.pushState = window._historyCache.pushState;
     `,
        },
      ],
    };
  },

Upvotes: 0

Related Questions