ActiveReports 15 .NET Edition
ActiveReports 15 User Guide / Preview Reports / JavaScript / Integration to VueJS Application
In This Topic
    Integration to VueJS Application
    In This Topic

    This page explains how you can embed the JSViewer component in your VueJS application (ASP.NET Core). We will use React template to begin with and replace 'React front-end' application with the 'Vue.js front-end' application. To run the Vue Application Server, you will require the node.js JavaScript runtime and Vue CLI. Use the following command in the terminal or command prompt to install the Vue CLI:

    npm install -g @vue/cli

    1. Create an ASP.NET Core application with the React template.

    2. Delete the default 'Controller' under Controllers folder and add an empty MVC controller with the same name, that is, 'HomeController.cs'.

    3. Add the following 'using' statements in the 'HomeController.cs' file at the top:

      using Microsoft.AspNetCore.Hosting;
      using System.IO;

    4. Now, replace the default Index method of 'HomeController.cs' with the following:

      HomeController.cs
      Copy Code
         private readonly IWebHostEnvironment _env;
         public HomeController(IWebHostEnvironment env) => _env = env;
         public IActionResult Index()
         {
             return new PhysicalFileResult(Path.Combine(_env.WebRootPath, "index.html"), "text/html");
         }
      
    5. Right-click the Solution under the Solution Explorer and select Manage Nuget Packages.

    6. Add the following package to the project.

      GrapeCity.ActiveReports.Aspnetcore.Viewer

    7. Add a new folder called 'Reports' in the application's root and place the report you want to display in the viewer, in this folder.

    8. Make sure to set the Build Action property of the report to 'Embedded Resource'.

    9. Open 'Startup.cs' file and add the following 'using' statements at the top.

      using GrapeCity.ActiveReports.Aspnetcore.Viewer;
      using System.Reflection;
      using System.Text;

    10. Replace the ConfigureServices and Configure methods in the 'Startup.cs' file with the following:

      Startup.cs
      Copy Code
              public void ConfigureServices(IServiceCollection services)
              {
                  Encoding.RegisterProvider(CodePagesEncodingProvider.Instance);
                  services
                      .AddReporting()
                      .AddMvc(options => options.EnableEndpointRouting = false);
              }
              // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
              public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
              {
                  if (env.IsDevelopment())
                  {
                      app.UseDeveloperExceptionPage();
                  }
                  else
                  {
                      app.UseExceptionHandler("/Error");
                  }
                  app.UseStaticFiles();
                  app.UseReporting(settings =>
                  {
                      settings.UseEmbeddedTemplates("JSViewer_Vue_NetCore.Reports", Assembly.GetAssembly(GetType()));
                      settings.UseCompression = true;
                  });
                  app.UseMvc(routes =>
                  {
                      routes.MapRoute(
                          name: "default",
                          template: "{controller=Home}/{action=Index}/{id?}");
                  });
              }
      
    11. Make sure that the correct namespace is provided in the first argument of UseEmbeddedTemplates method for the report.

    12. Build the application by pressing Ctrl + Shift + B.

      Configure VueJS front end

    13. Remove the existing ClientApp folder.

    14. Open the project root in the run command prompt or terminal window and run the following command:

      vue create client-app

      (The Vue CLI does not allow upper case letters in project names).
    15. Once the Vue CLI finishes generating the project, rename the client-app folder to ClientApp

      With above three steps, we have fully replaced the 'React front-end' application with the 'Vue.js front-end' application.   

    16. Expand the 'src' folder inside the ClientApp folder. 

    17. Remove 'assets' and 'components' folders, and 'App.vue', '.gitignore', and 'babel.config.js' files from the 'src' folder.

    18. Replace the content of 'main.js' file in the ClientApp\src folder with the following:

      main.js
      Copy Code
      import Vue from 'vue';
      import App from './app/App.vue';
      import "@grapecity/ar-viewer/dist/jsViewer.min.js";
      import "@grapecity/ar-viewer/dist/jsViewer.min.css";
      new Vue({
        el: '#app',
        render: h => h(App)
      });
      
    19. Right-click the 'src' folder and add a new folder with the name 'app'.

    20. Add a new 'Text' file under the app folder and rename it as 'App.vue'.

    21. Add the following content in 'App.vue' file:

      App.vue
      Copy Code
      <template>
          <div id="viewer-host">
          </div>
      </template>
      <script>
          export default {
              name: 'app',
              mounted() {
                  this.viewer = new GrapeCity.ActiveReports.JSViewer.create({
                      element: '#viewer-host'
                  });
                  this.viewer.openReport("DemoReport.rdlx");
              }
          }
      </script>
      <style>
          #viewer-host{
              background-color: #e5e5e5;
              height: 100vh;
              float: right;
              width: 100%;
          }
      </style>
      
       
    22. Right-click the ClientApp folder to add a new file 'webpack.config.js' having the following content:

      webpack.config.js
      Copy Code
      const path = require('path');
      const VueLoaderPlugin = require('vue-loader/lib/plugin');
      const HtmlWebpackPlugin = require("html-webpack-plugin");
      const CopyWebpackPlugin = require('copy-webpack-plugin');
      module.exports = {
          entry: './src/main.js',
          output: {
              path: path.resolve(__dirname, '../wwwroot/'),
              filename: 'bundle.js'
          },
          devtool: "source-map",
          module: {
              rules: [
                  {
                      test: /\.vue$/,
                      exclude: /node_modules/,
                      loader: 'vue-loader'
                  },
                  {
                      test: /\.css$/,
                      use: [
                          'vue-style-loader',
                          'css-loader'
                      ]
                  },
                  {
                      test: /\.js$/,
                      exclude: /node_modules/,
                      loader: 'babel-loader',
                      options:{
                         presets:["@babel/preset-env"]
                     }
                  }
              ]
          },
          plugins: [
              new VueLoaderPlugin(),
              new HtmlWebpackPlugin({
                  template: "./src/index.html"
              })
          ],
          devServer: {
              contentBase: 'src/',
              historyApiFallback: true,
              disableHostCheck: true,
              proxy: {
                  '/api/*': {target: 'http://localhost:58723', secure: false},
                  '/reports': {target: 'http://localhost:58723', secure: false}
              }
          }
      };
      
                        
    23. In the ClientApp folder, select 'package.json' file and replace its contents with the following:

      package.json
      Copy Code
      {
        "name": "js-viewer-vue",
        "version": "1.0.0",
        "description": "This sample demonstrates the use of GrapeCity ActiveReports JS Viewer with a VueJS app and ASP.NET Core backend.",
        "author": "GrapeCity",
        "license": "MIT",
        "scripts": {
          "dev": "webpack-dev-server --mode development --hot --open",
          "build": "webpack --mode production"
        },
        "devDependencies": {
          "@babel/core": "^7.4.5",
          "@babel/plugin-proposal-class-properties": "^7.4.4",
          "@babel/preset-env": "^7.4.5",
          "babel-loader": "^8.0.6",
          "copy-webpack-plugin": "^5.0.3",
          "css-loader": "^1.0.0",
          "html-webpack-plugin": "^3.2.0",
          "vue-loader": "^15.4.2",
          "vue-template-compiler": "^2.5.17",
          "webpack": "^4.20.0",
          "webpack-cli": "^3.1.2",
          "webpack-dev-server": "^3.1.9"
        },
        "dependencies": {
          "vue": "^2.5.17",
          "@grapecity/ar-viewer": "latest"
        }
      }
      
    24. Move 'index.html' from public folder to the 'src' folder and then delete the public folder.

    25. Select 'index.html' file and remove the following line from it:

      <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    26. Open ClientApp folder in the command prompt or terminal window and run the following command to install the npm packages.

      npm install

    27. Run the application by pressing F5.