Getting Started

1. Install NC-Blazor.Vuezor NuGet package using method of your choice
2. In your _Imports.razor, add

@using NC.Blazor
@using NC.Blazor.Vuezor

3. In your C# ViewModel, inherit from VueVM

public class MyData : VueVM
{
    // You will be required to override this:
    // - true : means all your method/properties has no side-effect. That is if you
    //          change Property A, it wont change value of property B. 
    //
    //          VueZor can just set the property value of A without worrying about
    //          getting value of B from Blazor.

    // - false : you have property that cascade changes to another Property.
    //           Such as, setting Score to 40 will cause Grade to change to F. 
    //           In this case, VueZor has to get changes from Blazor.
    protected override bool IsOnewaySyncSupported => false;
    
    // Properties are automatically visible to Vue
    public int Counter { get; set; }
    
    // Public Methods as well
    public void Increment()
    {
        this.Counter++;
    }    
}

4. Create VueApp Component and set TData to your ViewModel class. And create your View in the VueApp component.

Points of interest:

• You can reduce bug from your View by using @context.Mustache and nameof to create quite a strongly typed binding. DO NOT USE {{ nameof(context.counter) }} since it will cause Vue template compiler to fail. (I will look into the root cause soon)
• v-on: can be bound directly to your C# methods.

<VueApp TData="MyData">

    Hello from Vue : @context.Mustache(nameof(context.counter))<br/>
    {{ counter }}

    <button v-on:click="Increment">Increment</button>
        
</VueApp>

5. Run. Vue Library is added for you automatically at run-time in the page that use VueApp component!

Ready for more ?

Read how to use 3rd Party Vue Components