DEV Community

Discussion on: Vue Application as a Wordpress Plugin

Collapse
 
salvo2689 profile image
Salvo2689

hello I perfectly executed your tutorial and finally, thanks to you, I found one to use vue without tag script, which has involved me a great deal of performance on GTMAtrix. I got stuck in point 4, activating 'npm run build' I have to go to localhost: 8080 to view the page. But on the shortcode page I only see 'Message from Vue:'. Could you kindly be more specific on how to implement new vue code on that shortcode? How do I add new files as in the initial tutorial you refer to. I have another question, my shortcode will have an output parameter which identifies it 'id'. As it could be called multiple times on the same page. How can I change, according to this 'id', also the id (el) Vue, so that they do not conflict? one last thing. When I finish the plugin, just send the folder via ftp to the site remotely or do I have to take the distribution? if the second in what way. Forgive me for all these questions, but I'm very confused.

Collapse
 
dgmann profile image
DGMANN • Edited

Hi Salvo,
you have two parts. The first part is to run "npm run build" in your local Vue-App. Out of this vue creates an distribution folder. In this folder the files are stored, which should be uploaded in the second part. Second part: You can upload the dist folder into you plugin folder via ftp. Important point is to change the name of the scripts in your wp-vue.php with the correct hash value if filename-hashing is activated in your vue app.

It's probably the most rudimentary way, but you can easily exchange the files via ftp. Of course you can also build a pipeline and connect your ftp server to it, but for a little test this would be a bit of overkill.

I'm not sure I understood your intention correctly. You want to be able to place your Vue plugin on the website multiple times and the id of both the WP-shortcode and the initial Vue tag is the same? Unfortunately, this is not easy to do because the id of the Vue app is already fixed before the backend code runs.