Build an Excel task pane add-in using Vue

08/26/2020
4 minutes to read
- +6

In this article, you'll walk through the process of building an Excel task pane add-in using Vue and the Excel JavaScript API.

Prerequisites

Note

If you aren't familiar with Node.js or npm, you should start by setting up your development environment.

Node.js (the latest LTS version)
The latest version of Yeoman and the Yeoman generator for Office Add-ins. To install these tools globally, run the following command via the command prompt:
```
npm install -g yo generator-office
```
Note

Even if you've previously installed the Yeoman generator, we recommend you update your package to the latest version from npm.

Install the Vue CLI globally.
```
npm install -g @vue/cli
```

Generate a new Vue app

Use the Vue CLI to generate a new Vue app. From the terminal, run the following command.

vue create my-add-in

Then select the default preset. If you are prompted to use either Yarn or NPM as a package you can choose either one.

Generate the manifest file

Each add-in requires a manifest file to define its settings and capabilities.

Navigate to your app folder.
```
cd my-add-in
```
Use the Yeoman generator to generate the manifest file for your add-in by running the following command:
```
yo office
```
Note

When you run the yo office command, you may receive prompts about the data collection policies of Yeoman and the Office Add-in CLI tools. Use the information that's provided to respond to the prompts as you see fit. If you choose Exit in response to the second prompt, you'll need to run the yo office command again when you're ready to create your add-in project.

When prompted, provide the following information to create your add-in project:
- Choose a project type: Office Add-in project containing the manifest only
- What do you want to name your add-in? My Office Add-in
- Which Office client application would you like to support? Excel

After you complete the wizard, it creates a My Office Add-in folder, which contains a manifest.xml file. You will use the manifest to sideload and test your add-in at the end of the quick start.

Tip

You can ignore the next steps guidance that the Yeoman generator provides after the add-in project's been created. The step-by-step instructions within this article provide all of the guidance you'll need to complete this tutorial.

Secure the app

While not strictly required in all add-in scenarios, using an HTTPS endpoint for your add-in is strongly recommended. Add-ins that are not SSL-secured (HTTPS) generate unsecure content warnings and errors during use. If you plan to run your add-in in Office on the web or publish your add-in to AppSource, it must be SSL-secured. If your add-in accesses external data and services, it should be SSL-secured to protect data in transit. Self-signed certificates can be used for development and testing, so long as the certificate is trusted on the local machine.

To enable HTTPS for your app, create a vue.config.js file in the root folder of the Vue project with the following contents:

var fs = require("fs");
var path = require("path");
var homedir = require('os').homedir()

module.exports = {
  devServer: {
    port: 3000,
    https: true,
    key: fs.readFileSync(path.resolve(`${homedir}/.office-addin-dev-certs/localhost.key`)),
    cert: fs.readFileSync(path.resolve(`${homedir}/.office-addin-dev-certs/localhost.crt`)),
    ca: fs.readFileSync(path.resolve(`${homedir}/.office-addin-dev-certs/ca.crt`))
  }
}

From the terminal, run the following command to install the add-in's certificates.
```
npx office-addin-dev-certs install
```

Update the app

Open the public/index.html file and add the following <script> tag immediately before the </head> tag:
```
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
```

Open src/main.js and replace the contents with the following code:

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

window.Office.initialize = () => {
  new Vue({
    render: h => h(App)
  }).$mount('#app');
};

Open src/App.vue and replace the file contents with the following code:

<template>
  <div id="app">
    <div class="content">
      <div class="content-header">
        <div class="padding">
          <h1>Welcome</h1>
        </div>
      </div>
      <div class="content-main">
        <div class="padding">
          <p>
            Choose the button below to set the color of the selected range to
            green.
          </p>
          <br />
          <h3>Try it out</h3>
          <button @click="onSetColor">Set color</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'App',
    methods: {
      onSetColor() {
        window.Excel.run(async context => {
          const range = context.workbook.getSelectedRange();
          range.format.fill.color = 'green';
          await context.sync();
        });
      }
    }
  };
</script>

<style>
  .content-header {
    background: #2a8dd4;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    overflow: hidden;
  }

  .content-main {
    background: #fff;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
  }

  .padding {
    padding: 15px;
  }
</style>

Start the dev server

From the terminal, run the following command to start the dev server.
```
npm run serve
```
In a web browser, navigate to https://localhost:3000 (notice the https). If the page on https://localhost:3000 is blank and without any certificate errors, it means that it is working. The Vue App is mounted after Office is initialized, so it only shows things inside of an Excel environment.

Try it out

Follow the instructions for the platform you'll be using to run your add-in and sideload the add-in within Excel.
- Windows: Sideload Office Add-ins on Windows
- Web browser: Sideload Office Add-ins in Office on the web
- iPad and Mac: Sideload Office Add-ins on iPad and Mac
In Excel, choose the Home tab, and then choose the Show Taskpane button in the ribbon to open the add-in task pane.
Select any range of cells in the worksheet.
In the task pane, choose the Set color button to set the color of the selected range to green.

Next steps

Congratulations, you've successfully created an Excel task pane add-in using Vue! Next, learn more about the capabilities of an Excel add-in and build a more complex add-in by following along with the Excel add-in tutorial.

Excel add-in tutorial