Integrate Vue.js in a ProcessWire module

[dotnetic 941]

Hey folks,

@kongondo asked me some questions about how I integrated vue.js into ModulesManager2.

I was already planning to release a tutorial video of the integration process soon, but I don't have much time now as I am busy with customer work. So here is a quick roundup, which will be improved over time and become a full-blown tutorial. I hope to cover the basics and don't forget anything.

How did you implement the integration?
I created a new vue project via 

vue create .

inside my site/modules/mymodule folder

Do your assets still live under the Vue JS public folder?
I don't exactly know what you mean with assets. Are you speaking of images? I don't use images atm.

Where do your view files live, i.e. under your modules directory or in templates?
As I mentioned in point one, they are in the modules directory. Here is a screenshot of my directory:

As soon as I release the beta of ModulesManager2 you can go through the source code in github.

Where is your index.xxx file and how are you serving it?
vue-cli comes with a built in server and the index.html is automatically generated on-the-fly.
The command for running the server with HMR (hot media reload) resides in the package.json and is run via

npm run serve

This is the standalone server.

Anything else I should know (maybe .htaccess issues, etc)?
Create a vue.config.js in your custom module's root directory and add following parameters to it, to disable filename hashing:

const webpack = require("webpack");

module.exports = {
    runtimeCompiler: false,
    filenameHashing: false,
    pages: {
        main: {
            // entry for the page
            entry: 'src/main.js',
            // the source template
            template: 'public/index.html',
            // output as dist/index.html
            filename: 'index.html',
            // when using title option,
            // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'Index Page',
        }
    },
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
            })
        ]
    }
};

Edit: After creating the config run

npm run build

Then you can reference these files in your module like I did here:

$markup = '<div id="app"></div>';
$scriptPath = $this->config->urls->siteModules . $this->className;
$markup .= "<script src='$scriptPath/dist/js/chunk-vendors.js'></script>";
$markup .= "<script src='$scriptPath/dist/js/main.js'></script>";

I added the configureWebpack part to have access to the $ and jQuery objects inside of my vue files.

The install/uninstall overlay panel in MM2, is that something custom or a ProcessWire panel?
Standard ProcessWire panels

If it is a ProcessWire panel, did you have any difficulties implementing it into your Vue app?
ProcessWire's panel init happens before vue is initiated or rendered, so pw-panel links inside of vue are not catched.

To make pw-panel links inside of vue work, you have to defer (don't know if this is the correct term) the process to a body click event:

$(document).on("click", "#app .pw-panel", function (e, el) {
    e.preventDefault();
    let toggler = $(this);
    pwPanels.addPanel(toggler);
    toggler.click();
});

I hope this helps. If you have questions, please ask.

Edited October 7, 2019 by Jens Martsch - dotnetic
Added build step

[kongondo 7,395]

Thanks @Jens Martsch - dotnetic! Excellent write-up.

23 minutes ago, Jens Martsch - dotnetic said:

Do your assets still live under the Vue JS public folder?
I don't exactly know what you mean with assets. Are you speaking of images? I don't use images atm.

You've sort of answered the question. What I meant was if you had images and such would they still live under /public?

23 minutes ago, Jens Martsch - dotnetic said:

Where is your index.xxx file and how are you serving it?
vue-cli comes with a built in server and the index.html is automatically generated on-the-fly.

Thanks. I thought the integration would have required to point to a different index.xxx (maybe an index.php) file inside ModulesManager2's folder. Good to know this is not the case.

23 minutes ago, Jens Martsch - dotnetic said:

If you have questions, please ask.

I suppose then that the API endpoint in ModulesManager2 is execute()?

 

23 minutes ago, Jens Martsch - dotnetic said:

I hope this helps.

A lot! Thanks.

[elabx 902]

Hi! Wanted to know if anyone has a more elaborated guide on how to use Vuejs with Proceswirer for Process/Inputfield modules with hotreload and all the webpack nice thingies 🙂 so that for example, I can view the process/inputfield module in development in the context of the ProcessWire pages/routes.

[kongondo 7,395]

On 2/4/2021 at 10:45 PM, elabx said:

Wanted to know if anyone has a more elaborated guide on how to use Vuejs with Proceswirer for Process/Inputfield modules with hotreload and all the webpack nice thingies 🙂 so that for example, I can view the process/inputfield module in development in the context of the ProcessWire pages/routes.

I didn't, until earlier this week! I managed to get hotreload inside a ProcessWire Process Module that displays a Vue JS App in development mode, running under a different port from ProcessWire! I also threw in live reload in the mix for changes to my .module, .php files, etc. I'll do a writeup when I get some time. FYI, this only worked with vanilla Vue JS. I couldn't make it to work with Nuxt or Gridsome.

[elabx 902]

1 minute ago, kongondo said:

I didn't, until earlier this week! I managed to get hotreload inside a ProcessWire Process Module that displays a Vue JS App in development mode, running under a different port from ProcessWire! I also threw in live reload in the mix for changes to my .module, .php files, etc. I'll do a writeup when I get some time. FYI, this only worked with vanilla Vue JS. I couldn't make it to work with Nuxt or Gridsome.

Man I also figured this out, I hadn't had the time to come back and report!  It's all very rough but I basically load through the local server by vue-cli-service serve. I followed a Wordpress tutorial so I have no idea what the webpack config actually does and it must have something to do with the success, but it worked good enough to start working. Now I feel I've wasted my life without hot reload 🤣

[kongondo 7,395]

3 minutes ago, elabx said:

I followed a Wordpress tutorial

Same here! This one.

 

4 minutes ago, elabx said:

Now I feel I've wasted my life without hot reload 🤣

Hehe. Tell me about it!

[elabx 902]

2 minutes ago, kongondo said:

Same here! This one.

Exactly that one haha! 

[kongondo 7,395]

Aha! The tut I intend to write will explain what all those options do (although the WordPress tut has some good explanations as well).