Module to enable vue syntax.

[13Groszy]

Hi there, I'm looking for a bit of support.
Can someone shortly explain or navigate, how to use vue components inside liquid/cshtml files (preferred is liquid)?
Documentation around it is pretty much impossible to find, lot of projects in that area are out-dated and not updated for years (still using vue2).
If that help, I aim to create blog-type website with a lot of various widgets so I need to pass the data to those components somehow.

[hishamco]

You can check the following exaples:

1. Cultures list

OrchardCore/src/OrchardCore.Modules/OrchardCore.Localization/Views/LocalizationSettings.Edit.cshtml

Lines 20 to 68 in a259ab4

	<script type="text/x-template" id="options-table">
	<div class="mb-3">
	<table class="table border-bottom">
	<thead>
	<tr>
	<th>@T["Culture"]</th>
	<th>@T["Default culture"]</th>
	<th>&nbsp;</th>
	</tr>
	</thead>
	<tbody>
	<tr v-for="(culture, index) in data" :key="index">
	<td>
	<span v-if="culture != ''">{{ culture }}</span>
	<span v-if="culture == ''">@CultureInfo.InvariantCulture.DisplayName</span>
	<input type="hidden" class="form-control" v-bind:value="culture" />
	</td>
	<td>
	<div class="form-check ms-5">
	<input type="radio" class="form-check-input" :id="'customRadio_' + index" v-bind:value="culture" v-model="defaultCulture">
	<label class="form-check-label" title="Set as default" v-bind:for="'customRadio_' + index"></label>
	</div>
	</td>
	<td class="text-end">
	<a v-on:click="remove(index)" title="@T["Remove culture"]" href="javascript:void(0)" class="btn btn-secondary btn-sm" style="cursor:pointer">
	<i class="fa-solid fa-trash" aria-hidden="true"></i>
	</a>
	</td>
	</tr>
	</tbody>
	</table>
	<div class="row">
	<div class="col">
	<select v-model="selectedCulture" class="form-select col">
	<option v-for="(culture, index) in allCultures" v-bind:value="culture.Name" :key="index" v-if="!(culture.Supported)">
	{{ culture.Name }} ({{ culture.DisplayName }})
	</option>
	</select>
	</div>
	<div class="col">
	<a v-on:click="add()" href="javascript:void(0)" class="btn btn-success"><i class="fa-solid fa-plus small" aria-hidden="true"></i> @T["Add culture"]</a>
	</div>
	</div>
	<input class="form-control" id="@Html.IdFor(m => m.SupportedCultures)" name="@Html.NameFor(m => m.SupportedCultures)" type="hidden" v-bind:value="getSupportedCultures()" />
	<input class="form-control" id="@Html.IdFor(m => m.DefaultCulture)" name="@Html.NameFor(m => m.DefaultCulture)" type="hidden" v-bind:value="getDefaultCulture()" />
	</div>
	</script>

2. Media Application

https://github.com/OrchardCMS/OrchardCore/blob/main/src/OrchardCore.Modules/OrchardCore.Media/Views/Admin/MediaApplication.cshtml

[Piedone]

Also see: https://github.com/Lombiq/Orchard-Vue.js. This is Vue 3.