Create a new Blazor solution named ClassLibraryConsumer. Right-click the solution and select Add->New Project, and then select Razor Class Library – name it BlazorUniversity.ClassLibrary.
This will create a new Razor class library inside a new folder named BlazorUniversity.ClassLibrary, and create a new
csproj file with the same name. Add the new library to the current solution, and then reference the new library from the ClassLibraryConsumer project.
Our new class library can now be used from any number of projects by including it in the solution and referencing it, or it can be pushed to NuGet.org and consumed as a NuGet package.
Adding supporting files
The default project created for us has a folder named
Accessing resources in a consumed component library
Resources within the wwwroot folder of a consumed component library will be published with your project automatically. To access resources from a consumed library we need to use the following URL format.
_contentis the part of the path where all consumed component libraries’ resources end up.
PackageIdis the Package Id of the binary that contains the resources. This is the name you see entered in the Package id input when you right-click your class library, select Properties, and select the Package tab. If you installed the library via NuGet, it is the name of the package you installed.
MyImage.pngis the name of any resource within the component library’s
wwwrootfolder. The resource can be directly within that folder, or the path can identify a resource within any level of sub-folders, such as
Note that any components within our component library should also reference resources using the same format.
Consuming a component library
Consuming a component library is as simple as either
- Adding a project reference to the library
- Adding a NuGet reference to the library.
Referencing consumed scripts in Client-side Blazor
In a client-side Blazor application this typically involves adding a
<script> reference to our project’s wwwroot/index.html file.
Referencing consumed scripts in Server-side Blazor
For a server-side Blazor app it is added into the file /Pages/_Host.cshtml and is usually added before the existing
<script> tag referencing either