Build an Excel add-in using Vue
In this article, you'll walk through the process of building an Excel add-in using Vue and the Excel JavaScript API.
Prerequisites
Install the Vue CLI globally.
npm install -g vue-cli
Install the latest version of Yeoman and the Yeoman generator for Office Add-ins globally.
npm install -g yo generator-office
Generate a new Vue app
Use the Vue CLI to generate a new Vue app. From the terminal, run the following command and then answer the prompts as described below.
vue init webpack my-add-in
When responding to the prompts that are generated by the previous command, override the default answers for the following 3 prompts. You can accept the default answers for all other prompts.
- Install vue-router?
No
- Set up unit tests:
No
- Setup e2e tests with Nightwatch?
No
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. Run the following command and then answer the prompts as shown below.
yo office
- Choose a project type:
Office Add-in 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, the generator creates the manifest file.
- Choose a project type:
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 Online 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, open the file package.json in the root folder of the Vue project, modify the dev
script to add the --https
flag, and save the file.
"dev": "webpack-dev-server --https --inline --progress --config build/webpack.dev.conf.js"
Update the app
In your code editor, open the folder My Office Add-in that Yo Office created at the root of your Vue project. In that folder, you'll see the manifest file that defines the settings for your add-in: manifest.xml.
Open the manifest file, replace all occurrences of
https://localhost:3000
withhttps://localhost:8080
, and save the file.Open the file index.html (located at the root of your Vue project), add the following
<script>
tag immediately before the</head>
tag, and save the file.<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
Open src/main.js and remove the following block of code:
new Vue({ el: '#app', components: {App}, template: '<App/>' })
Then add the following code in that same location, and save the file.
const Office = window.Office Office.initialize = () => { new Vue({ el: '#app', components: {App}, template: '<App/>' }) }
Open src/App.vue, replace file contents with the following code, add a line break at the end of the file (i.e., after the
</style>
tag), and save the file.<template> <div id="app"> <div id="content"> <div id="content-header"> <div class="padding"> <h1>Welcome</h1> </div> </div> <div id="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 start
In a web browser, navigate to
https://localhost:8080
. If your browser indicates that the site's certificate is not trusted, you will need to configure your computer to trust the certificate.After your browser loads the add-in page without any certificate errors, you're ready test your add-in.
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
- Excel Online: Sideload Office Add-ins in Office Online
- 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 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.
See also
Feedback
We'd love to hear your thoughts. Choose the type you'd like to provide:
Our feedback system is built on GitHub Issues. Read more on our blog.
Loading feedback...