Converting Blazor Extension for Visual Studio Code

29 Oct 20253 minutes to read

The Syncfusion® Blazor conversion add-in for Visual Studio Code 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.

Use the following steps to run the Syncfusion® project conversion in an existing Blazor Web application:

  1. In Visual Studio Code, open an existing Blazor Web application or create a new Blazor Web application.

  2. In Explorer (Workspace), right-click the project file and select Convert to Syncfusion Blazor Application… from the context menu. Refer the screenshot below.

    Context menu showing Convert to Syncfusion Blazor Application command

  3. From the Command Palette, choose Select Blazor Version (version published on nuget.org).

    Palette showing selection of Blazor version

  4. From the palette, choose the desired Syncfusion theme.

    Palette showing selection of Syncfusion themes

  5. The application is configured with the required Syncfusion® Blazor 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 dependencies.

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 packages are added to the application as shown below.

Project file showing Syncfusion NuGet package references

During conversion, the selected Syncfusion® Blazor theme is added in the following locations based on the application type.

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

Example showing where the theme link is added in the project