Jump to content
Jens Martsch - dotnetic

Integrate Vue.js in a ProcessWire module

Recommended Posts

Posted (edited)

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:

image.png.407570b0e2b665821e67651d6a50bd50.png

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 by Jens Martsch - dotnetic
Added build step
  • Like 12

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...