dotnetic 941 Posted October 6, 2019 (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: 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 13 Share this post Link to post Share on other sites
kongondo 7,395 Posted October 6, 2019 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. 2 Share this post Link to post Share on other sites
elabx 902 Posted February 4 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. 2 Share this post Link to post Share on other sites
kongondo 7,395 Posted March 12 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. 1 Share this post Link to post Share on other sites
elabx 902 Posted March 12 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 🤣 Share this post Link to post Share on other sites
kongondo 7,395 Posted March 12 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! 1 Share this post Link to post Share on other sites
elabx 902 Posted March 12 2 minutes ago, kongondo said: Same here! This one. Exactly that one haha! Share this post Link to post Share on other sites
kongondo 7,395 Posted March 12 Aha! The tut I intend to write will explain what all those options do (although the WordPress tut has some good explanations as well). 1 Share this post Link to post Share on other sites