nuxt-setup.md

Nuxt Setup

Install the module to your Nuxt application with one command:

npx nuxi module add msoffice-addin

Define manifest file

msoffice-addin/manifest.xml

Lines 1 to 26 in f2d8b46

	<?xml version="1.0" encoding="UTF-8"?>
	<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="TaskPaneApp">
	<Id>{VITE_OFFICE_ID}</Id>
	<Version>1.0</Version>
	<ProviderName>{VITE_OFFICE_PROVIDER_NAME}</ProviderName>
	<DefaultLocale>en-US</DefaultLocale>
	<DisplayName DefaultValue="{VITE_OFFICE_DISPLAY_NAME}" />
	<Description DefaultValue="{VITE_OFFICE_DESCRIPTION}"/>
	<SupportUrl DefaultValue="{VITE_OFFICE_DOMAIN}/support" />
	<AppDomains>
	<AppDomain>{VITE_OFFICE_DOMAIN}</AppDomain>
	</AppDomains>
	<DefaultSettings>
	<SourceLocation DefaultValue="https://www.contoso.com/search_app/Default.aspx" />
	</DefaultSettings>
	<Permissions>ReadWriteDocument</Permissions>
	<WebApplicationInfo>
	<Id>{VITE_OFFICE_ID}</Id>
	<Resource>api://{VITE_OFFICE_HOST}/outlook/{VITE_OFFICE_ID}</Resource>
	<Scopes>
	<Scope>openid</Scope>
	<Scope>profile</Scope>
	<Scope>User.Read</Scope>
	</Scopes>
	</WebApplicationInfo>
	</OfficeApp>

Define .env file

msoffice-addin/.env.local

Lines 1 to 5 in 57892cc

	VITE_OFFICE_ID=c6890c26-5bbb-40ed-a321-37f07909a2f0
	VITE_OFFICE_DOMAIN=https://www.contoso.com
	VITE_OFFICE_PROVIDER_NAME=Contoso, Ltd
	VITE_OFFICE_DISPLAY_NAME=Contoso App
	VITE_OFFICE_DESCRIPTION=Office add-in for Contoso App

Update config

export default defineNuxtConfig({
  modules: ['msoffice-addin'],

  msOfficeAddin: {
    manifests: [
      {
        src: 'manifest.xml',
        route: '/outlook/manifest.xml',
      },
    ],

    /** Office.js will be injected to index.html page */
    injectOfficeJS: ['/'],

    defineENV: env => ({
      VITE_OFFICE_HOST: new URL(env.VITE_OFFICE_DOMAIN).host,
    }),
  },
})

That's it! You can now use msoffice-addin in your Nuxt app ✨

Learn more about configuration