Activity plugin with single page application in view.php

Activity plugin with single page application in view.php

by Benedikt Kulmann -
Number of replies: 2

Hey,

I am not entirely new to moodle plugin development, however my javascript code in plugins were my own custom AMDs so far. As I am concentrating on quiz plugin development right now, I would like to incorporate any single page application framework for the participant facing part of my plugins. For quiz plugins it's rather annoying to have constant page reloads, so I figured this would be a good way to improve UX for participants (I am planning on keeping the traditional php stuff for activity configuration, like forms etc, because that would obviously be too much work to change).

Long story short, I'm trying to integrate a Vue.js application, which is built with webpack, into the view.php. When building the Vue.js application, there are 3 javascript bundles created (app.js, manifest.js and vendor.js) + 1 css bundle. The way to render the application would normally be to just include these .js and .css files into an html file and having a div with id="app", where Vue then renders the app. My problem is that I don't have any clue how to include the .js files. The way to do this in moodle would normally be to have an AMD file and an init function inside the AMD. Although it is possible to deploy javascript as AMD in webpack, it doesn't seem to be possible to surround it with a named function. And because the deployment is an automatic (and good) procress I would rather not have to fiddle something into the resulting .js files by hand.

Anyone here who has an idea how to tackle this problem? I.e. how to get the three .js files (AMD or vanilla) to be included AND executed when rendering view.php?

Thanks in advance!

PS: I can provide the complete code if someone wants to see it. However, the packaging to a .zip file for plugin installation requires manual work right now as I didn't invest to much time into build automation in this early proof of concept work. Just say something if you want me to guide you through the code..

Average of ratings: -
In reply to Benedikt Kulmann

Re: Activity plugin with single page application in view.php

by Jan Dageförde -

Hi Benedikt,

A side note first, regarding your last paragraph: I can very much recommend using git to track your code - in general, but it also helps for dissemination of the code if you want to have someone take a look at it. You can always start with private repositories (or even private git hosters, such as a local Gitlab installation) if you don't want to share right away, and make it publicly available if needed.

Regarding the actual question: I haven't seen any Moodle plugins using Vue via webpack so far. You could have a look at a simple demo created by David Mudrák - I believe it compiles the pages at runtime. Should result in a slight overhead on the clients, but depending on how complex your scripts are that might not even be noticeable. The explanation of his approach is here: https://github.com/mudrd8mz/moodle-tool_vuejsdemo/blob/master/HOWTO.md.

If you want webpack (and I believe that's the preferred approach), have a look at how Nextcloud configures webpack for its plugins. They also have per-plugin configurations of webpack. However, the generated JS file is not an AMD module; it is a plain JS file that you can import via $PAGE->requires->js().

Please let us know which approach you choose and how it works out - sadly I (still) haven't been able to use Vue.js in any of my Moodle plugins and I am very curious about the results!

Cheers, Jan

Average of ratings: Useful (1)
In reply to Jan Dageförde

Re: Activity plugin with single page application in view.php

by Benedikt Kulmann -

Hi Jan,

thank you so much for your reply!

I do use git (both github and my private gitlab instance) on an everyday basis. No need to convince me. smile

With your advice I got a basic activity with vue.js running. There are still manual steps involved in deploying as .zip for plugin installation in moodle, but I explained that in the readme of the repo. Happy if you want to take a look yourself smile

https://github.com/kulmann/moodle-activity_vuetest


Mainly there were three steps involved:

1. I didn't know that you can include js with `$PAGE->requires->js()`, only saw `js_init()` etc through auto completion. Thus I didn't find a way to include javascript that executes itself. So a big thanks for that hint. wink

2. Looks like Vue.js needs to run inside a wrapper, I found this one: https://github.com/vuejs/vue-web-component-wrapper

3. Not yet sure about a better way, but I enabled the `abstract` router mode so that the actual urls in the browser won't be changed during navigation through the app. Maybe it is possible to work with moodle urls, but didn't find a way, yet. Default router replaces too much of the url.


Next issues will be incorporating i18n from moodle and whether or not it is possible to deliver the vue app through the mobile app (I have absolutely no experience on the latter). Then I will try to port one of our quiz game activities to vue.


Anyway, thanks again for your help!

Benedikt

Average of ratings: -