Converting Blazor Extension for Visual Studio Code

3 Jun 20243 minutes to read

The Syncfusion Blazor conversion is an add-in for Visual Studio Code that converts an existing Blazor application into a Syncfusion Blazor Web Application by adding the required NuGet packages and themes.

NOTE

The Syncfusion Blazor Web Application Project Conversion utility is available from v17.4.0.39.

The steps below assist you to using the Syncfusion Project conversion in your existing Blazor Web Application:

  1. Open an existing Blazor Web Application or create a new Microsoft Blazor Web Application in Visual Studio Code.

  2. Select Convert to Syncfusion Blazor Application… from the context menu when you right-click on the Project file from Explorer (Workspace). Refer the screenshot below.

    Conversion Add-in

  3. Select Blazor Version (which published in nuget.org) from the palette appears.

    Select Blazor Version

  4. Choose the Theme from the palette appears.

    Select Themes

  5. The application configured with Syncfusion Blazor required NuGet packages and themes.

  6. If you installed the trial setup or NuGet packages from nuget.org you must register the Syncfusion license key to your application since Syncfusion introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio release. Navigate to the help topic to generate and register the Syncfusion license key to your application. Refer to this UG topic for understanding the licensing details in Essential Studio for Blazor.

NuGet Packages

Based on the application type, the following NuGet packages are added as NuGet references.

Syncfusion Blazor NuGet packages Application type
Syncfusion.Blazor Syncfusion Blazor Web App
Syncfusion Blazor Server App
Syncfusion Blazor WebAssembly App
Syncfusion Blazor WebAssembly App (ASPNET Core hosted)
Syncfusion Blazor WebAssembly App (Progressive Web Application)
Syncfusion.Blazor.PdfViewerServer.Windows Syncfusion Blazor Server App
Syncfusion.Blazor.WordProcessor Syncfusion Blazor Server App
Syncfusion Blazor WebAssembly App
Syncfusion Blazor WebAssembly App (ASPNET Core hosted)
Syncfusion Blazor WebAssembly App (Progressive Web Application)

The NuGet packages added to the application file as follows.

NuGetPackage

While converting the application, the selected Syncfusion Blazor theme is added in the following location of a Blazor type application.

Application type File location
Syncfusion Blazor Web App ~/Components/App.razor
Syncfusion Blazor Server App {Project location}/Pages//_Host.cshtml
Syncfusion Blazor WebAssembly App (ASPNET Core hosted)
Syncfusion Blazor WebAssembly App (Progressive Web Application)		 {Client Project location}/wwwroot/index.html
Syncfusion Blazor WebAssembly App {Project location}/wwwroot/index.html

CDNLink