Create a blank "Vue and ASP.NET Core" application.

• Open Visual Studio .NET 2026 and create a new application of "Vue and ASP.NET Core" type:
  
  
• Configure the application to use .NET 10.0:
  

"VueApp1.Server" project: Add references to the Vintasoft nuget-packages to "VueApp1.Server" project.

"VueApp1.Server" project: Specify drawing engine, which should be used by VintaSoft Imaging .NET SDK for drawing of 2D graphics.

• Add reference to the "Vintasoft.Imaging.Drawing.SkiaSharp" nuget-package. Reference to the "SkiaSharp" nuget-package version 3.119.0 will be added automatically.
  
• Open "Program.cs" file in "VueApp1.Server" project, add code line "Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();" at the beginning of file - added code specifies that VintaSoft Imaging .NET SDK should use SkiaSharp library for drawing of 2D graphics.

• Add reference to the "Vintasoft.Imaging.Gdi" nuget-package.
  
• Open "Program.cs" file in "VueApp1.Server" project, add code line "Vintasoft.Imaging.Drawing.Gdi.GdiGraphicsFactory.SetAsDefault();" at the beginning of file - added code specifies that VintaSoft Imaging .NET SDK should use System.Drawing library for drawing of 2D graphics.

"VueApp1.Server" project: Add reference to nuget-packages.

• Add reference to the "System.IO.Packaging" nuget-package version 10.0.0.

"VueApp1.Server" project: Create web services, which allow to upload/download file and edit XLSX document.

• Create web service that allows to upload/download file

  • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
    
  • Select "Empty API controller" template, set the controller name to the "MyVintasoftFileApiController" and press the "Add" button
    
  • Specify that MyVintasoftFileApiController class is derived from Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController class
    
    Here are source codes of MyVintasoftFileApiController class:
    
    • C#

    namespace VueApp1.Server.Controllers
    {
        public class MyVintasoftFileApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController
        {
            public MyVintasoftFileApiController(IWebHostEnvironment hostingEnvironment)
                : base(hostingEnvironment)
            {
            }
        }
    }
    
    

• Create web service that allows to edit XLSX document

  • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
    
  • Select "Empty API controller" template, set the controller name to the "MyVintasoftOfficeApiController" and press the "Add" button
    
  • Specify that MyVintasoftOfficeApiController class is derived from Vintasoft.Imaging.Office.AspNetCore.ApiControllers.VintasoftOfficeApiController class
    
    Here are source codes of MyVintasoftOfficeApiController class:
    
    • C#

    namespace VueApp1.Server.Controllers
    {
        public class MyVintasoftOfficeApiController : Vintasoft.Imaging.Office.AspNetCore.ApiControllers.VintasoftOfficeApiController
        {
            public MyVintasoftOfficeApiController(IWebHostEnvironment hostingEnvironment)
                : base(hostingEnvironment)
            {
            }
        }
    }
    
    

"VueApp1.Server" project: Copy XLSX documents to a server side.

• Create folder "UploadedImageFiles\SessionID" in "VueApp1.Server" project and copy test XLSX document "<SdkInstallPath>\VintaSoft\Imaging .NET 15.0\Examples\ASP.NET Core\CSharp\AspNetCoreSpreadsheetEditorDemo\wwwroot\UploadedImageFiles\SalesReport.xlsx" to the "UploadedImageFiles\SessionID" folder. This document will be displayed in spreadsheet document editor.
  
  
• Create folder "Resources" in "VueApp1.Server" project and copy XLSX document "<SdkInstallPath>\VintaSoft\Imaging .NET 15.0\Examples\ASP.NET Core\CSharp\AspNetCoreSpreadsheetEditorDemo\wwwroot\Resources\ChartSource.xlsx" to the "Resources" folder. This document will be used as a source for "standard" charts when chart is adding to spreadsheet document using "Add chart" dialog.

Delete files, which are not necessary in this tutorial.

• Delete files "WeatherForecast.cs" and "Controllers\WeatherForecastController.cs" in "VueApp1.Server" project - the WeatherForecast Web API controller is not necessary in this tutorial.
  
  
• Delete files "src\components\TheWelcome.vue", "src\components\WelcomeItem.vue" in "vueapp1.client" project - this Vue-component is not necessary in this tutorial.
  
  
• Open file "src\App.vue" in "vueapp1.client" project and delete code that uses the following Vue-components: HelloWorld, TheWelcome - these Vue-components are not necessary in this tutorial.
  Here are source codes of "App.vue" file after update:
  
  • JavaScript

  <script setup>
  </script>
  
  <template>
      <main>
      </main>
  </template>
  
  <style scoped>
  </style>
  
  

Compile the solution for restoring TypeScript-dependencies in "vueapp1.client" project.

"vueapp1.client" project: Add JavaScript files to the "vueapp1.client" project.

• Copy Vintasoft.Shared.js, Vintasoft.Imaging.js and Vintasoft.Imaging.Office.js files from "<InstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" folder to the root folder of "vueapp1.client" project.
  
  
• Copy files Vintasoft.Imaging.css and Vintasoft.Imaging.Office.css from "<InstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" folder to the root folder of "vueapp1.client" project.
  
  
• Specify, which "standard" dialogs should be used by web spreadsheet document editor
  • If web spreadsheet document editor should use ready-to-use "standard" Bootstrap dialogs:
    • Add "bootstrap" Node-module to the "package.json" file. Rebuild the project for refreshing Node-modules.
      Here are source codes of "package.json" file after update:
      
      • JSON

      {
        "name": "vueapp1.client",
        "version": "0.0.0",
        "private": true,
        "type": "module",
        "engines": {
          "node": "^20.19.0 || >=22.12.0"
        },
        "scripts": {
          "dev": "vite",
          "build": "vite build",
          "preview": "vite preview",
          "lint": "eslint . --fix --cache"
        },
        "dependencies": {
          "vue": "^3.5.26"
        },
        "devDependencies": {
          "@eslint/js": "^9.39.2",
          "@vitejs/plugin-vue": "^6.0.3",
          "bootstrap": "~5.3.8",
          "eslint": "^9.39.2",
          "eslint-plugin-vue": "~10.6.2",
          "globals": "^17.0.0",
          "vite": "^7.3.0",
          "vite-plugin-vue-devtools": "^8.0.5"
        }
      }
      
      

    • Copy Vintasoft.Imaging.Dialogs.Bootstrap.js and Vintasoft.Imaging.Office.Dialogs.Bootstrap.js files from "<InstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" folder to the root folder of "vueapp1.client" project.
    
    
  • If web spreadsheet document editor should use ready-to-use "standard" jQuery UI-dialogs:
    • Add "jquery-ui-dist" Node-module to the "package.json" file. Rebuild the project for refreshing Node-modules.
    • Copy Vintasoft.Imaging.Dialogs.jQueryUI.js and Vintasoft.Imaging.Office.Dialogs.jQueryUI.js files from "<InstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" folder into "src\app\assets\" folder.
    
    
  • If web spreadsheet document editor should use custom "standard" dialogs, please read how to create custom "standard" dialogs here.
    
    
• Add references to Vintasoft JavaScript files to the header of "index.html" file in "vueapp1.client" project.
  Add links to the Vintasoft CSS-files to the "index.html" file in "vueapp1.client" project.
  Add link to the "bootstrap.css" file to the "index.html" file in "vueapp1.client" project.
  
  
  Here are source codes of "index.html" file after update:
  
  • HTML

  <!DOCTYPE html>
  <html lang="">
  <head>
      <meta charset="UTF-8">
      <link rel="icon" href="/favicon.ico">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Vite App</title>
  
      <link rel="stylesheet" type="text/css" href="node_modules\bootstrap\dist\css\bootstrap.css" />
      <link rel="stylesheet" type="text/css" href="Vintasoft.Imaging.css">
      <link rel="stylesheet" type="text/css" href="Vintasoft.Imaging.Office.css">
  
      <script src="Vintasoft.Shared.js" type="text/javascript"></script>
      <script src="Vintasoft.Imaging.js" type="text/javascript"></script>
      <script src="Vintasoft.Imaging.Office.js" type="text/javascript"></script>
      <script src="Vintasoft.Imaging.Dialogs.Bootstrap.js" type="text/javascript"></script>
      <script src="Vintasoft.Imaging.Office.Dialogs.Bootstrap.js" type="text/javascript"></script>
  </head>
  <body>
      <div id="app"></div>
      <script type="module" src="/src/main.js"></script>
  </body>
  </html>
  
  

"vueapp1.client" project: Create Vue-component that allows to edit a spreadsheet (XLSX) document.

• In "vueapp1.client" project in folder "src\components\" create "SpreadsheetDocumentEditorDemo.vue" file that will contain source codes of Vue-component:
  • Select "Add => New Item..." context menu for folder "src\components\" in "vueapp1.client" project => "Add new item" dialog will appear
  • Install template "Vue TypeScript Template" from internet if template is not installed in Visual Studio
  • Select "Vue TypeScript Template" type for new item
  • Set "SpreadsheetDocumentEditorDemo.vue" as element name
  • Click the "Add" button => dialog will be closed and file "SpreadsheetDocumentEditorDemo.vue" will be added into folder "src\components\"
  
  In SpreadsheetDocumentEditorDemo.vue file add template that represents demo header and div-element that will display spreadsheet document editor:
  
  
  In SpreadsheetDocumentEditorDemo.vue file change script type from TypeScript to JavaScript:
  
  
  In SpreadsheetDocumentEditorDemo.vue file add 'mounted' function (contains JavaScript code that initializes and creates web spreadsheet document editor):
  
  
  In SpreadsheetDocumentEditorDemo.vue file add CSS-style for Vue-component:
  
  
  Here is HTML/CSS/JavaScript code of SpreadsheetDocumentEditorDemo Vue-component:
  
  • JavaScript

  <template>
    <h1>VintaSoft Spreadsheet Document Editor (Vue + ASP.NET Core)</h1>
  
    <div id="spreadsheetDocumentEditorContainer" className="spreadsheetDocumentEditorContainer"></div>
  </template>
  
  <script lang="js">
    import { defineComponent } from 'vue';
  
    export default defineComponent({
      mounted() {
        setTimeout(__init, 500);
      }
    });
  
    function __init() {
      // set the session identifier
      Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionId");
  
      // specify web services, which should be used in this demo
      Vintasoft.Shared.WebServiceJS.defaultFileService = new Vintasoft.Shared.WebServiceControllerJS("/vintasoft/api/MyVintasoftFileApi");
      Vintasoft.Shared.WebServiceJS.defaultOfficeService = new Vintasoft.Shared.WebServiceControllerJS("/vintasoft/api/MyVintasoftOfficeApi");
  
      // create the spreadsheet document editor control settings
      var spreadsheetDocumentEditorControlSettings = new Vintasoft.Imaging.Office.UI.WebSpreadsheetDocumentEditorControlSettingsJS("spreadsheetDocumentEditorContainer", "");
  
      // create the spreadsheet document editor control
      var spreadsheetDocumentEditorControl = new Vintasoft.Imaging.Office.UI.WebSpreadsheetDocumentEditorControlJS(spreadsheetDocumentEditorControlSettings);
  
      // copy the file from global folder to the session folder
      spreadsheetDocumentEditorControl.openDocument("SalesReport.xlsx");
    }
  </script>
  
  <style scoped>
    h1 {
      text-align: center;
    }
  
    .spreadsheetDocumentEditorContainer {
      width: 1200px;
      height: 800px;
    }
  </style>
  
  

  
  
• Add created Vue-component to the Vue-application code - "src\App.vue" file.
  
  
  Here are source codes of "App.vue" file after update:
  
  • JavaScript

  <script setup>import SpreadsheetDocumentEditorDemo from './components/SpreadsheetDocumentEditorDemo.vue'</script>
  
  <template>
      <main>
          <SpreadsheetDocumentEditorDemo />
      </main>
  </template>
  
  <style scoped>
  </style>
  
  

  
  
• Open "vite.config.js" file in "vueapp1.client" project and specify that Vue.js aplication can have access to the ASP.NET Core Web API controller "/vintasoft/api/" in "VueApp1.Server" project:
  • JavaScript

  import { fileURLToPath, URL } from 'node:url';
  
  import { defineConfig } from 'vite';
  import plugin from '@vitejs/plugin-vue';
  import fs from 'fs';
  import path from 'path';
  import child_process from 'child_process';
  import { env } from 'process';
  
  const baseFolder =
    env.APPDATA !== undefined && env.APPDATA !== ''
      ? `${env.APPDATA}/ASP.NET/https`
      : `${env.HOME}/.aspnet/https`;
  
  const certificateName = "vueapp1.client";
  const certFilePath = path.join(baseFolder, `${certificateName}.pem`);
  const keyFilePath = path.join(baseFolder, `${certificateName}.key`);
  
  if (!fs.existsSync(baseFolder)) {
    fs.mkdirSync(baseFolder, { recursive: true });
  }
  
  if (!fs.existsSync(certFilePath) || !fs.existsSync(keyFilePath)) {
    if (0 !== child_process.spawnSync('dotnet', [
      'dev-certs',
      'https',
      '--export-path',
      certFilePath,
      '--format',
      'Pem',
      '--no-password',
    ], { stdio: 'inherit', }).status) {
      throw new Error("Could not create certificate.");
    }
  }
  
  const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
    env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:7140';
  
  // https://vitejs.dev/config/
  export default defineConfig({
    plugins: [plugin()],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    server: {
      proxy: {
        '^/vintasoft/api/': {
          target,
          secure: false
        }
      },
      port: parseInt(env.DEV_SERVER_PORT || '63870'),
      https: {
        key: fs.readFileSync(keyFilePath),
        cert: fs.readFileSync(certFilePath),
      }
    }
  })
  
  

  
  

Run the "Vue and ASP.NET Core" application and see the result.