时间戳

首页 > 解决方案 > 是否可以在 Blazor 中使用 Vue 和 Vue 组件？

c# - 是否可以在 Blazor 中使用 Vue 和 Vue 组件？

问题描述

我希望在 Blazor 中使用 Vue/Vuetify 组件，因为它很强大。

我试过这个，但没有运气。

<body>
<div id="app">Loading...</div>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss"></a>
</div>
<script src="_framework/blazor.webassembly.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        message: 'Hello from Vue!'
    })
</script>

索引.razor

@page "/" 
<h1>Hello, world!</h1> 
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
<p>{{ message }}</p>

在 Blazor 中运行 Vue 是否有技巧或解决方法？

标签： c#asp.netvue.jsvuetify.jsblazor

解决方案

<!-- wwwroot/index.html -->
<script src="_framework/blazor.webassembly.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script>
  window.newVueApp = function () {
    new Vue({
      el: "#app",
      data: {
        counter: 0,
      },
      methods: {
        increment() {
          this.counter++;
        },
      },
    });
  };
</script>

<!-- Shared/MainLayout.razor -->
<div class="content px-4" id="app" v-cloak>
    @Body
</div>
...
@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await JS.InvokeVoidAsync("newVueApp");
    }
}

<!-- Pages/Index.razor -->
<p>counter: {{ counter }}</p>

<button @click="increment">Increase counter</button>

更新的示例项目在这里。

推荐阅读