This is a small demonstration of using Vue.js and Vue Router in a Moodle plugin.
The javascript files and Vue components will be bundled to a single file as AMD module
amd/build/app-lazy.min.js using Webpack.
You may call functions in that module with $PAGE->requires->js_call_amd.
The suffix -lazy is used to tell Moodle that the file should not be bundled with Moodle's other AMD modules That makes sense because the javascript file generated by Webpack is quite big and is only needed for this plugin.
If you want to change the Vue components or the javascript code, you have to install all dependencies:
cd vue
npm install
With npm run dev or npm run watch you build the file amd/build/app-lazy.min.js
(in development mode) that will be loaded by the browser. Watch does not exit, it will
re-build the file whenever one of the source files was touched.
Important: Before a commit you should build the file with npm run build (production mode).
This generates a much smaller file. However, the file is not suitable for debugging using the
browser web developer tools.
Hint: you should disable Moodle's javascript cache. You may add the line $CFG->cachejs = false;
to config.php. If you disable caching, Moodle takes the file from the amd/src folder.
Hence, there is a symbolic link to ../build/app-lazy.min.js.
If you want to use javascript libraries from Moodle, you have to declare them as external
dependencies in vue/webpack.config.js under exports.externals.
You may create forms just like any other form in Moodle by extending the class moodleform
(have a look at the classes/form/ directory).
The forms are displayed using a modal. There is the javascript class MFormModal.