About this article

In this article, you’ll walk through the process of building an Excel plug-in using Vue and the Excel JavaScript API.

Preliminary knowledge

  • Install the Vue CLI globally

    npm install -g vue-cli

Copy the code

  • Install the latest version of Yeoman and Yeoman Generator for Office Add-ins globally.

    npm install -g yo generator-office

Copy the code

Create a new Vue app

Generate a new Vue app using the Vue CLI. From the command line, execute the following command and set the prompt configuration as described below.

vue init webpack my-add-in

Copy the code

When setting up the pop-up prompt, remember to set the following three non-default Settings. You can use the default configuration for everything else.

  • Install vue-router? No
  • Set up unit tests: No
  • Setup e2e tests with Nightwatch? No

Generate the manifest file

Each plug-in needs a manifest file to define its Settings and capabilities.

  1. Go to your app’s folder.

    cd my-add-in

Copy the code

  2. Use the Yeoman generator to generate the manifest file for your plug-in. Run the following command and set the prompt as follows.

    yo office 

Copy the code
    • Choose a project type: Manifest
    • What do you want to name your add-in? : My Office Add-in
    • Which Office client application would you like to support? : Excel
Once you have completed the bootstrap, a manifest file and resource file should be available to create your project. ! [Yeoman generator](.. /images/yo-office.png) > [!NOTE] > If you're prompted to overwrite **package.json**, answer **No** (do not overwrite).Copy the code

Keep your applications secure

While using HTTPS is not mandatory in plug-in development, it is strongly recommended that you use HTTPS for your plug-in. Plug-ins that are not SSL-Secured (HTTPS) will display content insecurity warnings and errors. If you plan to use your plug-in on Office Online or publish your plug-in on AppSource, it must be SSL-Secured. If your plug-in can access external data and services, it must also be SSL-secured to secure data during transmission. Self-signed certificates can be used in development and test environments as long as the certificate is trusted on the local machine.

To enable HTTPS for your application, simply open package.json in the project root directory, modify the dev script, add the — HTTPS flag, and save the file.

"dev": "webpack-dev-server --https --inline --progress --config build/webpack.dev.conf.js"

Copy the code

Update the application

  1. In your editor, open the manifest file (the one in the project root directory that ends in “manifest.xml”). Replace all occurrences of https://localhost:3000 with https://localhost:8080 and save the file.

  2. Open index.html and add the following 

    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>

Copy the code

  3. Open SRC /main.js and remove the following code:

    new Vue({
    el: '#app',
    components: {App},
    template: '<App/>'
})

Copy the code

    Then add the following code in the same place.

    const Office = window.Office
Office.initialize = () => {
  new Vue({
    el: '#app',
    components: {App},
    template: '<App/>'
  })
}

Copy the code

  4. Open SRC/app.vue, replace the entire contents of the file with the following code, and add a newline at the end of the file (for example, after the tag) and save the file.

    <template>
<div>
    <div>
    <div>
        <div>
        <h1>Welcome</h1>
        </div>
    </div>
    <div>
        <div>
        <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>

Copy the code

Start the development server

  1. On the cli, run the following command to start the development server.

     npm start

Copy the code

  2. Open https://localhost:8080 in your browser. If your browser indicates that the certificate on the page is not trusted, you need to set up your computer to trust the certificate.

  3. After your browser completes loading the plugin page without any certificate errors, you are ready to test your plugin.

Give it a try

  1. Following the instructions for each platform, you will load and run your plug-in in Excel.

    • Windows: Sideload Office Add-ins on Windows
    • Excel Online: Sideload Office Add-ins in Office Online
    • iPad and Mac: Sideload Office Add-ins on iPad and Mac

  2. In Excel, select the Home option and then the Show Taskpane button to open the plug-in Taskpane.

  3. Select any range of cells in the worksheet.

  4. In the Task pane, select the Set Color button to Set the color of the selected area to green.

Subsequent steps

A: congratulations! You have successfully created an Excel plug-in using Vue. Next, learn more about the capabilities of Excel plug-ins and follow the Excel plug-ins guide to creating a more complex plug-in.

Excel Plug-in Guide

For reference

  • Excel Plug-in Guide
  • Excel JavaScript API core concepts
  • Examples of Excel plug-in code
  • Excel JavaScript API reference