How to embed a Blazor project in an existing Vue project?

At present, the official only provides two examples of angular and react, so this tutorial will explain how to Vueuse it in existing projects in the future, and reactthe textbooks that have been prepared in the previous issue!

preparation process

`Vue`Project Creation Process

Use VueCreate a Demo project to select all the default No and then use the project demoname

npm init vue@latest

cd demo
npm i

After the installation is complete, find the dependencies in the root directory of the project and index.htmladd the following code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
    <script src="_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script> 
    <script src="_framework/blazor.webassembly.js"></script>
  </body>
</html>

src\App.vueAdd the following code in

<script setup lang="ts">
</script>

<template>
  <main>
    <my-blazor-counter/>   <!--对应razor组件的标签 -->
  </main>
</template>

Then Vuebuild the project

npm run build

Copy the generated distdirectory to the Blazorcreatedwwwroot

`Blazor`Project Creation Process

Use to mkdircreate a webassemblyfolder, cdenter webassemblythe directory, and create an empty blazor-webassemblyproject

mkdir webassembly  
cd webassembly
dotnet new blazorwasm-empty

It will Microsoft.AspNetCore.Components.CustomElementsbe added to the project file, Microsoft.AspNetCore.Components.CustomElementswhich is a package for Vueuse in . It should be noted that this package can only be used by the official version of .Net 6Rc and .Net7Blazor

<PackageReference="Microsoft.AspNetCore.Components.CustomElements" Version="7.0.2" />

Then open Program.csand modify the relevant code

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
// BlazorApp.Pages.Index可以修改成自己的渲染的razor组件
// my-blazor-counter就是上面提到的razor对应的标记 这样就可以在react通过my-blazor-counter去渲染BlazorApp.Pages.Index组件的内容了
builder.RootComponents.RegisterCustomElement<webassembly.Pages.Index>("my-blazor-counter");
builder.RootComponents.Add<HeadOutlet>("head::after");

await builder.Build().RunAsync();

Open webassembly.Pages.Indexto modify the relevant code

<h1>@Title</h1>

<p role="status">点击数量: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">点击Blazor组件效果</button>

@code {
    private int currentCount = 0;
    [Parameter] 
    public string Title { get; set; } = "Vue 嵌入 Blazor";
    [Parameter] 
    public int? IncrementAmount { get; set; }

    private void IncrementCount()
    {
        currentCount++;
    }
}
<style>
    button {
      
      
        font-weight: bold;
        background-color: #7b31b8;
        color: white;
        border-radius: 4px;
        padding: 4px 12px;
        border: none;
    }

    button:hover {
      
      
        background-color: #9654cc;
        cursor: pointer;
    }

    button:active {
      
      
        background-color: #b174e4;
    }

</style>

-  需要注意将`Vue`项目build生成的文件拷贝并且覆盖到`Blazor`项目中的`wwwroot`中

running result

We entered the Blazor project and prepared to execute the blazor project

dotnet watch

Then check the effect, the execution effect is as follows:

insert image description here

There is basically no problem in running, so Blazorit will not be too rigid. We can Blazorembed it in certain situations where there are advantages Blazor. VueThe cost of using it is extremely low. It is just a reference js, and then it can be directly added by adding the corresponding tag. Use, of course, if you want to debug two projects together, you may need to build them locally to proxy the two projects to one port. This situation is better nginx than the current copying to the directory. I am using wwwrootThis embedding method is embedded in a react-based Ide( opensumi ) Blazorcomponent to achieve the effect of dynamically compiling the code and rendering Blazorthe component in real time, which will effectively improve Blazorthe efficiency of development, and can also be used in the company's existing projects Vue or Embedded in the project of react and , at present, the embedding cost is very low, and the official support and two modes. You can refer to the actual business to use different modes. Speaking of which, the basic explanation is complete. Thank you for reading.AngularBlazorServerWebassembly

BlazorFriends who like it can add me to communicate

Sharing from token

Technical exchange group: 737776595

Recommend a super easy-to-use Blazor UIcomponent MASA Blazor open source protocol, MITcommercial use is no problem at all