Updating the Admin attribute, using Vue 3 in the Lombiq Vue.js module for Orchard Core - This week in Orchard (21/03/2024)
Updating the Admin attribute, adding support for the ReCaptcha onload callback, and a demo about using Vue 3 in our Vue.js module for Orchard Core! Head to our post, and let's see the details!
Orchard Core updates
Updating the Admin attribute
Now, all the routes have been moved from the Startup.cs files to the [Admin] attribute to define the admin routes. It's much easier to write and much easier to read.
The [Admin] attribute has optional parameters for a custom route template and route name. It works just like the [Route(template, name)] attribute, except it prepends the configured admin prefix. You can apply it to the controller or the action; if both are specified then the action's template takes precedence. The route name can contain {area}, {controller}, and {action}, which are substituted during mapping so the names can be unique for each action. This means you don't have to define these admin routes in your module's Startup class anymore, but that option is still available and supported. Let's take a look at this example:
[Admin("Person/{action}/{id?}", "Person{action}")]public class PersonController : Controller{[Admin("Person", "Person")]public IActionResult Index() { ... }public IActionResult Create() { ... }
public IActionResult Edit(string id) { ... }
}
In this example (if the admin prefix remains the default "Admin"), you can reach the Index action at ~/Admin/Person (or by the route name Person) because its own action-level attribute took precedence. You can reach Create at ~/Admin/Person/Create (route name PersonCreate) and Edit for the person whose identifier string is "john-doe" at ~/Admin/Person/john-doe (route name PersonEdit).
Here is a real example from the source code of Orchard Core where you can see how to use the [Admin] attribute in the example of the DashoardController.
Add support for the ReCaptcha onload callback
Let's say you use JQuery Unobtrusive Validation to validate your forms. It's a common practice to use the ReCaptcha feature to protect the forms against robots. You may want to add validation to the reCAPTCHA form element, which is loaded dynamically and thus can't be added until after the reCAPTCHA is loaded. Fortunately, Google provides an onload parameter that you can provide on the ReCaptcha script. Unfortunately, there wasn't a convenient way to specify that parameter when using the ReCaptchaTagHelper.
The solution here is to add an attribute to the ReCaptchaTagHelper to specify the onload callback.
Demos
Using Vue 3 in the Lombiq Vue.js module for Orchard Core
The Lombiq Vue.js module for Orchard Core is an Orchard Core module, that contains Vue.js and commonly used Vue.js components to be used in other Vue.js apps as dependencies. Provides extensibility to create Vue.js component templates as Orchard Core shapes making them able to override in themes or modules. If you remember, we had a demo about it where we showed how you can use Vue.js Single File Components!
But this time we will try out something else, because starting version 4.0, this Orchard Core module is using Vue 3 and only supports SFC compilation. Resources are now imported as Javascript modules, so the Vue 3 used by your component is independent of Orchard Core's built-in vuejs resource, and the two can exist on the same page.
This module is part of our Open-Source Orchard Core Extensions solution. This Orchard Core Visual Studio solution contains most of Lombiq's open-source Orchard modules and themes, as well as, related utilities and libraries. Please keep in mind that only those extensions included that use the latest released version of Orchard (i.e., the very cutting-edge ones depending on a nightly build are not yet here).
So, let's clone this solution and find the project called Lombiq.VueJs.Samples. This project uses Vue 3, even though Orchard Core still uses Vue 2.
Interested in how it works in practice? Check out this video to find out!
News from the community
Orchard Dojo Newsletter
Lombiq's Orchard Dojo Newsletter has 475 subscribers! We have started this newsletter to inform the community around Orchard of the latest news about the platform. By subscribing to this newsletter, you will get an e-mail whenever a new post is published to Orchard Dojo, including This week in Orchard of course.
Do you know of other Orchard enthusiasts who would like to read our weekly articles? Tell them to subscribe here!