Skip to content

Using 3rd Party Vue Component

Jump to bottom
NantCom Co., Ltd edited this page Apr 16, 2021 · 1 revision

Please note that VueZor was developed against V.3 of Vue. Component developed for V.2 has different approaches to register the components and may not work.

Practical example: MDB for Vue

  1. Add link/script tags per manual (or CDN) installation instructions of the library to _Host.cshtml. EXCEPT script tag for Vue Library. Use this instead:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.11/vue.global.prod.js"></script>

VueZor will notice that you already have Vue Library loaded and will not add its own <script> tag to load Vue.

For MDB Vue , the whole code would look like this:

@page "/"
@namespace NC.Vuezor.Sample.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link href="css/site.css" rel="stylesheet" />
    <link href="NC.Vuezor.styles.css" rel="stylesheet" />

    <link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdb-vue-ui-kit/css/mdb.min.css">

    <title>NC.Vuezor</title>

    <base href="~/" />
</head>
<body>
    <div class="container">
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </div>
    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <!-- CANNOT USE THIS : script src="https://unpkg.com/vue@next"></script -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.11/vue.global.prod.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mdb-vue-ui-kit/js/mdb.umd.min.js"></script>

    <script src="_framework/blazor.server.js"></script>
</body>
</html>

Notice that the instruction stated that:

All components will be accessible from the global variable mdb. so we need to add that to your VueApp components.

  1. In your VueZor tag, add a VueComponents parameter as follows:
<VueApp TData="SampleVM"
        VueComponents="@(new string[] { "mdb" })"
        >

VueZor will notice that you want to include component from global variable mdb. It would scan for all components that was defined as property within that global variable.

You can also specify mdb.MDBBtn to use only MDBBtn component in your View

  1. In you View, use all lowercase tags to use the imported components
<VueApp TData="SampleVM"
        VueComponents="@(new string[] { "mdb" })"
        IsLoggingEnabled="false">

    <h1 style="margin-bottom: 20px">
        Vuezor Demo
    </h1>

    <mdbcard style="margin-bottom: 20px">
        <mdbcardbody>
            <mdbcardtitle class="text-primary">
                <h2>Counter Demo</h2>
            </mdbcardtitle>
            <mdbcardtext>

                Hello from Razor - now is @(DateTime.Now) <br/>
                Hello from Vue @context.Mustache(nameof(context.counter))

                <div style="margin-top: 20px">
                    <mdbinput label="Two Way binding:" v-model="counter" />
                </div>
            </mdbcardtext>

            <mdbbtn color="primary" v-on:click="Increment">Increment on Server</mdbbtn>
        </mdbcardbody>
    </mdbcard>
</VueApp>
Clone this wiki locally