ActiveReports 18 .NET Edition
Developers / Create Applications / WebDesigner Application / Integration to VueJS Application
In This Topic
    Integration to VueJS Application
    In This Topic

    This page explains how you can embed the ActiveReports WebDesigner component in your VueJS application (ASP.NET Core). We will use Vue and ASP.NET Core with the JavaScript template to create the application.

    1. Open Microsoft Visual Studio 2022 and create a new project, Vue and ASP.NET Core with JavaScript.

      Create a New Project Dialog

    2. Type a name for your project and click Create.

      Configure your New Project Dialog

    3. In the Solution Explorer, right-click the '.Server' project and select Manage NuGet Packages.

    4. Add the following packages to the project.

      MESCIUS.ActiveReports.Aspnetcore.Designer
      MESCIUS.ActiveReports.Aspnetcore.Viewer

    5. Add a new folder called 'resources' in the application's root and place the report you want to display in viewer, in this folder. The report you create in WebDesigner, on saving, is saved at this location.

    6. Update the 'Program.cs' file as follows:

      Program.cs
      Copy Code 
      using GrapeCity.ActiveReports.Aspnetcore.Designer;
using GrapeCity.ActiveReports.Aspnetcore.Viewer;
using GrapeCity.ActiveReports.Web.Designer;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddReportViewer();
builder.Services.AddReportDesigner();
builder.Services.AddMvc(options => options.EnableEndpointRouting = false);
var app = builder.Build();
app.UseHttpsRedirection();
if (!app.Environment.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
}
var ResourcesRootDirectory =
    new DirectoryInfo(Path.Combine(Directory.GetCurrentDirectory(), "resources"));
app.UseReportViewer(config => config.UseFileStore(ResourcesRootDirectory));
app.UseReportDesigner(config => config.UseFileStore(ResourcesRootDirectory, null, FileStoreOptions.NestedFoldersLookup));
app.UseDefaultFiles();
app.UseStaticFiles();
app.Run();
             

    7. Open the 'package.json' file and add the following packages for ActiveReports' Viewer and Designer under 'Dependencies':

      "@mescius/activereportsnet-designer": "^18.x.x",
      "@mescius/activereportsnet-viewer": "^18.x.x"

    8.  Add a new 'WebDesigner.vue' file in the src\components folder and add the following code.
      WebDesigner.vue
      Copy Code 
      <template>
    <div id="ar-web-designer"></div>
</template>
<script>
    import { arWebDesigner } from '@mescius/activereportsnet-designer';
    import { createViewer } from '@mescius/activereportsnet-viewer';
    export default {
        mounted() {
            let serverUrl = 'https://localhost:7226';
            arWebDesigner.create('#ar-web-designer', {
                rpx: { enabled: true },      
                appBar: { openButton: { visible: true } },
                editor: { showGrid: false },
                data: { dataSets: { visible: true, canModify: true }, dataSources: { canModify: true } },
                server: {
                    url: serverUrl + '/api'
                },
                preview: {
                    openViewer: (options) => {
                        if (this.viewer) {
                            this.viewer.openReport(options.documentInfo.id);
                            return;
                        }
                        this.viewer = createViewer({
                            element: '#' + options.element,
                            renderFormat: 'svg',
                            reportService: {
                                url: serverUrl + '/api/reporting',
                            },
                            reportID: options.documentInfo.id
                        });
                    }
                }
            });
        }
    }
</script>
<style>
    #ar-web-designer {
        height: 100vh;
        float: right;
        width: 100%;
    }
</style>

    9. Open 'App.vue' inside the src folder and replace its default content with the following code.

      App.vue
      Copy Code 
      <template>
    <div class="main">
        <WebDesigner />
    </div>
</template>
<script>
    import "@mescius/activereportsnet-viewer/dist/jsViewer.min.css";
    import "@mescius/activereportsnet-designer/dist/web-designer.css";
    import WebDesigner from './components/WebDesigner.vue';
    export default {
        name: 'app',
        components: {
            WebDesigner
        },
        methods: {
        }
    }
</script>
<style>
    .main {
        width: 100%;
        overflow-x: hidden
    }
</style>

    10.  To disable browser launch, set the 'launchBrowser' to 'false' in 'launchSettings.json' (in .Server project\Properties).

    11. Press Ctrl + Shift + B to build your project and then press F5 to run it.